微信小程序学习笔记

一、小程序代码组成

1.1 JSON配置

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

注意点：

1.json的key必须包裹在一个双引号中；

2.json的值支持以下数据类型：

​ 数字：包含浮点数和整数

​ 字符串：需要包裹在双引号中

​ Bool值，true或者false

​ 数组：需要包裹在方括号中[]

​ 对象：需要包裹在大括号中{}

​ Null

3.json文件无法使用注释

1.2 WXML模板

1.数据绑定

<!--pages/wxml/index.wxml-->
<text>当前时间：{{time}}</text>

​ 2.属性值的绑定(属性值必须被包裹在双引号中)

<text data-test="{{test}}"> hello world</text>

3. 语法内可进行简单的逻辑运算

三元运算
<!-- 根据 a 的值是否等于 10 在页面输出不同的内容 -->
<text>{{ a === 10? "变量 a 等于10": "变量 a 不等于10"}}</text>

算数运算
<view> {{a + b}} + {{c}} + d </view>

4.条件逻辑

<view wx:if="{{condition}}"> True </view>

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

5.列表渲染

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

<!-- 使用 wx:for-item 指定数组当前元素的变量名，使用 wx:for-index 指定数组当前下标的变量名：-->
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

6.wx:key的值以两种形式提供：

字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。

保留关键字 this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字

<switch wx:for="{{objectArray}}" wx:key="unique" > {{item.id}} </switch>
<button bindtap="switch"> Switch </button>
<button bindtap="addToFront"> Add to the front </button>

<switch wx:for="{{numberArray}}" wx:key="*this" > {{item}} </switch>
<button bindtap="addNumberToFront"> Add Number to the front </button>

7.模板

<!--
item: {
  index: 0,
  msg: 'this is a template',
  time: '2016-06-18'
}
-->

<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

<template is="msgItem" data="{{...item}}"/>

8.引用

WXML 提供两种文件引用方式import和include。

import 可以在该文件中使用目标文件定义的 template，只会 import 目标文件中定义的 template，而不会 import 目标文件中 import 的 template，简言之就是 import 不具有递归的特性

include 可以将目标文件中除了

1.3 WXSS 样式

1.在WXSS中，引入了rpx（responsive pixel）尺寸单位,标准为750*1334rpx,标准和iphone6一样

2.引用

引用另一个样式文件：@import './test_0.wxss'

3.内联样式

<view style="color: red; font-size: 48rpx"></view>

4选择器

类型	选择器	样例	样例描述
类选择器	.class	.intro	选择所有拥有 class=”intro” 的组件
id选择器	#id	#firstname	选择拥有 id=”firstname” 的组件
元素选择器	element	view checkbox	选择所有文档的 view 组件和所有的 checkbox 组
伪元素选择器	::after	view::after	在 view 组件后边插入内容
伪元素选择器	::before	view::before	在 view 组件前边插入内容

1.4JavaScript 脚本

生命周期函数

参数属性	类型	描述
onLoad	Function	生命周期函数–监听页面加载，触发时机早于onShow和onReady
onReady	Function	生命周期函数–监听页面初次渲染完成
onShow	Function	生命周期函数–监听页面显示，触发事件早于onReady
onHide	Function	生命周期函数–监听页面隐藏
onUnload	Function	生命周期函数–监听页面卸载
onPullDownRefresh	Function	页面相关事件处理函数–监听用户下拉动作
onReachBottom	Function	页面上拉触底事件的处理函数
onShareAppMessage	Function	用户点击右上角转发

二、小程序界面

2.1组件

一个小程序页面可以分解成多个部分组成，组件就是小程序页面的基本组成单元。为了让开发者可以快速进行开发，小程序的宿主环境提供了一系列基础组件。

组件共有属性

属性名	类型	描述	其他说明
id	String	组件的唯一标示	保持整个页面唯一
class	String	组件的样式类	在对应的WXSS中定义的样式类
style	String	组件的内联样式	可以通过数据绑定进行动态设置的内联样式
hidden	Boolean	组件是否显示	所有组件默认显示
data-*	Any	自定义属性	组件上触发的事件时，会发送给事件处理函数
bind / catch	EventHandler	事件	绑定、捕获事件

微信官方组件https://developers.weixin.qq.com/miniprogram/dev/component/

三方组件：https://youzan.github.io/vant-weapp/#/intro

2.2常见事件

类型	触发条件
touchstart	手指触摸动作开始
touchmove	手指触摸后移动
touchcancel	手指触摸动作被打断，如来电提醒，弹窗
touchend	手指触摸动作结束
tap	手指触摸后马上离开
longpress	手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发
longtap	手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
transitionend	会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart	会在一个 WXSS animation 动画开始时触发
animationiteration	会在一个 WXSS animation 一次迭代结束时触发
animationend	会在一个 WXSS animation 动画完成时触发

2.3page生命周期函数

三、API

宿主环境提供了丰富的API，可以很方便调起微信提供的能力.

3.1路由跳转

​ wx.switchTab(Object object) 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

​ wx.navigateTo(Object object)保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面

3.2网络请求

wx.request({
  url: 'test.php', //仅为示例，并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})

属性	类型	默认值	必填	说明
url	string		是	开发者服务器接口地址
data	string/object/ArrayBuffer		否	请求的参数
header	Object		否	设置请求的 header，header 中不能设置 Referer。 content-type 默认为 application/json
timeout	number		否	超时时间，单位为毫秒
method	string	GET	否	HTTP 请求方法
dataType	string	json	否	返回的数据格式
responseType	string	text	否	响应的数据类型
enableCache	boolean	false	否	开启 cache
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

常用object.method 的合法值

值	说明
GET	HTTP 请求 GET
HEAD	HTTP 请求 HEAD
POST	HTTP 请求 POST
PUT	HTTP 请求 PUT

3.3 数据缓存

wx.setStorage(Object object) 将数据存储在本地缓存中指定的 key 中，所有数据存储上限为 10MB。

wx.setStorage({
  key:"key",
  data:"value"
})

wx.getStorage({
  key: 'key',
  success (res) {
    console.log(res.data)
  }
})

wx.getStorage(Object object) 从本地缓存中异步获取指定 key 的内容

3.4 其他

更多api可以查看官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/

四、云开发