微信小程序开发杂记

最近刚接触小程序开发，除官方文档外，还参考了 微信公众号“ 微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">

<view wx:for="{{items}}" wx:for="index" wx:key="item">
	{{index+1}}、{{item.title}}
</view>

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，具体还要根据实际项目进行开发。

17. 自带的下拉刷新事件的监听

首先，在对应的json文件中添加 "enablePullDownRefresh": true
其次，在js 文件中，增加如下：

onPullDownRefresh: function () {
    //我对onLoad方法进行了重新加载，你可以执行别的方法
    console.log("onpullDownRefresh")
},

结束后，调用结束刷新时间 wx.stopPullDownRefresh()
18. margin 和 padding

padding:30rpx 0 20rpx 0;   -- 上 右 下 左 ，顺时针方向

19. vw、vh适配

百分比是相对于父控件的百分比。上述单位可用于百分比失效的情况下。
vw和vh是css3中的新单位，是一种视窗单位，在小程序中也同样适用。

小程序中，窗口宽度固定为100vw，将窗口宽度平均分成100份，1份是1vw
小程序中，窗口高度固定为100vh ，将窗口高度平均分成100份，1份是1vh
所以，我们在小程序中也可以使用vw、vh作为尺寸单位使用在布局中进行布局，但是一般情况下，百分比+rpx就已经足够使用了,所以它们的出场机会很少。
链接：https://blog.csdn.net/liyi1009365545/article/details/78542707

20. pages

用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。
文件名不需要写文件后缀，框架会自动去寻找对于位置的 .json, .js, .wxml, .wxss 四个文件进行处理。
数组的第一项代表小程序的初始页面（首页）。
小程序中新增/减少页面，都需要对 pages 数组进行修改。

21. button 去除边框

如果单对button设置样式或者border：none，则在界面上还是能看到button的边缘还是存在一个像素的边框，原因在于它的 button:after 方法里进行了重设。

故我们也要重写 ::after 方法，去除边框，如下：

/*使用 button::after{ border: none; } 来去除边框*/
.btn-bordernone{
  background: none !important;
  color: #000 !important;
}
.btn-bordernone::after{
  border: none;
}

可以看到该属性被我们重写的属性覆盖了，故边框消失了。

22. 不同界面间传值及读取 data 中的值

不同界面传值： 'path?key=value&key2=value2'
js 中调取data 的值： this.data.valueName