小程序-优化，部署，细节功能

作者 | Jeskson 来源 | 达达前端小酒馆

总结⼀些开发中的经验以及⼩程序的优化、部署、上线。

开发者⼯具的使⽤

缩进与缩进设置

缩进有两种⽅式

⼀种是使⽤Tab键，还有⼀种是使⽤空格，建议⼤家使⽤Tab。

⼩程序默认⼀个缩进=⼀个Tab=2个空格，通常前端开发是⼀个Tab=4个空格，你如果不习惯，可以在设置⾥进⾏设置。

快捷键

Ctrl+C复制、Ctrl+V粘贴、Ctrl+X剪切、Ctrl+Z重做、Ctrl+S保存，Ctrl+F搜索等

批量注释快捷键：

windows 是Ctrl+/

Mac是Command+/

代码块的缩进：

windows是代码左缩进ctrl + [、代码右缩进ctrl + ]

Mac是⌘ + [ 和 ⌘+ ]

格式化代码：

Windows为shift + alt + F

Mac为⇧ + ⌥ + F

报错提醒

开发者⼯具调试器⾥的Console，

wxml代码查看

开发者⼯具调试器⾥除了有Console，还有⼀个wxml标签⻚

了解当前⼩程序⻚⾯的wxml和wxss结构构成，⽤来调试组件的css样式等

⼩程序的转发功能

 onShareAppMessage: function (res) {
        if (res.from === 'button') {
            // 来⾃⻚⾯内转发按钮
            console.log(res.target)
        }
        return {
            title: '技术训练营',
            path: "pages/home/home,
            imageUrl:""
            success: function (res) {
                // 转发成功
            },
            fail: function (res) {
                // 转发失败
            }
        }
    },

title

为转发的标题，如果不填，默认为当前⼩程序的名称；

path

为当前页⾯路径，也可以为其他页⾯的路径，如果路径写错的话会显⽰“当前页⾯不存在”

imageUrl

为⾃定义图⽚路径，可以是本地⽂件路径或⽹络图⽚路径。⽀持PNG及JPG

显⽰图⽚长宽⽐是 5:4

如果不填写会取当前页⾯，从顶部开始，⾼度为 80% 屏幕宽度的图像作为转发图⽚

⼩程序配置的细节

没有tabBar的⼩程序，删掉app.json的tabBar配置项即可。

下拉⼩程序不出现空⽩

"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#1772cb",
    "navigationBarTitleText": "HackWork技术⼯坊",
    "navigationBarTextStyle":"white",
    "backgroundColor": "#1772cb"
  },

禁⽌⻚⾯下拉

{
  "window": {
    "disableScroll": true
  }
}
``

模板

静态的⻚⾯⽚段

<template name="foot"> <view class="page-foot"> <view class="index-desc" style="text-align:center;font-size:12px;botto m:20rpx;position:absolute;bottom:20rpx;width:100%">技术训练营</view> </view> </template>

使⽤import引⼊这个模板

<import src="/pages/common/foot.wxml" />

调⽤这个模板

<template is="foot" />

动态的⻚⾯⽚段

<template name="head"> <view class="page-head"> <view class="page-head-title">{{title}}</view> <view class="page-head-line"></view> <view wx:if="{{desc}}" class="page-head-desc">{{desc}}</view> </view> </template>

调⽤该模板

<import src="/pages/common/head.wxml" /> <template is="foot" />

创建模板时，使⽤的是<template name=”模板名”></template>，⽽调⽤模板时，使⽤的是<template is=”模板名” />

⼩程序的客服

在wxml⽂件⾥添加如下代码

<button open-type="contact"></button>

web-view

承载⽹⻚的容器

<web-view src="https://mp.weixin.qq.com/cgi-bin/wx"></web-view>