小程序-优化，部署，细节功能
- 2019 年 11 月 29 日
- 笔记
作者 | 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>
