最近剛接觸小程序開發,除官方文檔外,還參考了 微信公衆號“ 微little程序”,的相關視頻講解。
1. JSON 語法
JSON的值只能是以下幾種數據格式,其他任何格式都會觸發報錯,例如 JavaScript 中的 undefined。
數字,包含浮點數和整數
字符串,需要包裹在雙引號中
Bool值,true 或者 false
數組,需要包裹在方括號中 []
對象,需要包裹在大括號中 {}
Null
PS:還需要注意的是 JSON 文件中無法使用註釋,試圖添加註釋將會引發報錯。
2. wxss
3. 尺寸單位
rpx:規定屏幕尺寸都是 750rpx
rem:規定屏幕寬度爲 20 rem
以上是 wxss 針對於 css 擴展的 2 個尺寸單位,除此以外原 css 所用尺寸單位也都可以使用,如px(像素)等。
4. 常用的幾個屬性
bcakground:背景顏色
font-size:字體大小
color :字體顏色
5. wxml
數據綁定
6. wx:for
新版的開發工具中個,for循環的使用範例如下:
<block wx:for="{{imgUrls}}" wx:key="*this">
7. setData 的使用方法
switchCondition: function(){
this.setData({
condition: !this.data.condition
})
},
8. 如果對象的key 和 value 相同,也可以間接地表達
如 {foo:foo, bar:bar}
則引用可以這樣寫:data="{{foo,bar}}"
9. wxml 中的模板(template)
10. 事件
事件綁定的兩種方式:
bind 事件會冒泡,不會阻止事件的傳遞
catch 事件不會冒泡
常見的冒泡事件:
touchstart 手指觸摸
touchmove 手指觸摸後移動
touchcancel 手指觸摸動作被打算,如來電提醒,彈窗等
touchend 手指觸摸動作結束
tap 手指觸摸後離開
longtap 手指觸摸後,超過 350ms 再離開
target: 觸發事件的源組件
currentTarget:
11. 引用
wxml 提供兩種文件引用方式 import 和 include。
import: 可以在該文件中使用目標文件定義的 template
include:可以將目標文件除了<template/> 的整個代碼引入,相當於是拷貝到 include 的位置
12. 網絡
網絡使用前的相關說明:https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html
有幾點需要格外注意:
1)每個微信小程序需要事先設置通訊域名,小程序只可以跟指定的域名與進行網絡通信。
2)域名只支持 https (wx.request、wx.uploadFile、wx.downloadFile) 和 wss (wx.connectSocket) 協議;
3)跳過域名校驗
在微信開發者工具中,可以臨時開啓 開發環境不校驗請求域名、TLS版本及HTTPS證書 選項,跳過服務器域名的校驗。此時,在微信開發者工具中及手機開啓調試模式時,不會進行服務器域名的校驗。
在服務器域名配置成功後,建議開發者關閉此選項進行開發,並在各平臺下進行測試,以確認服務器域名配置正確。
13. webSocket:
wx.connectSocket(OBJECT)
創建一個 WebSocket 連接;一個微信小程序同時只能有一個 WebSocket 連接,如果當前已存在一個 WebSocket 連接,會自動關閉該連接,並重新
創建一個 WebSocket 連接。
1.7.0 及以上版本,最多可以同時存在 5 個 WebSocket 連接。
一個參考案例:https://www.cnblogs.com/imstudy/p/9224604.html
官方文檔的說明也比較詳細
14. 播放背景音樂的配置
若需要小程序在退到後臺後繼續播放音頻,你需要在 app.json 中配置 requiredBackgroundModes,如下:
{
"window": {
"backgroundTextStyle": "light",
.....
"enablePullDownRefresh": true
},
"requiredBackgroundModes": [
"audio"
]
}
更多全局配置的鏈接:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
15. 小程序位置權限的申請
在app.json中添加如下代碼:
"permission": {
"scope.userLocation": {
"desc": "你的位置信息將用於小程序位置接口的效果展示"
}
}
16. 登錄
1.登錄時,code 換取 session_key,具體還要根據實際項目進行開發。