最近刚接触小程序开发,除官方文档外,还参考了 微信公众号“ 微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,具体还要根据实际项目进行开发。