微信小程序開發雜記

最近剛接觸小程序開發,除官方文檔外,還參考了 微信公衆號“ 微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,具體還要根據實際項目進行開發。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章