小程式-優化，部署，細節功能
- 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>
