微信小程序开发杂记

最近刚接触小程序开发,除官方文档外,还参考了 微信公众号“ 微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,具体还要根据实际项目进行开发。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章