小程序-优化，部署，细节功能
作者 | 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>