微信小程序的指令 | Serena = 阳光果苏 = 自律给我自由

# 小程序的指令

wx:for 列表循环。

<view wx:for="{{array}}" wx:key="index">
    //i
  {{index+1}}-- {{item}}
</view>
//改变默认的item和index的名字
<view wx:for="{{array}}" wx:for-item="t" wx:for-index="i">
    //i
  {{i+1}}-- {{t}}
</view>
//循环嵌套，遍历
<view wx:for="{{array}}" >
    //i
	{{index+1}}-- {{item}}
  <text wx:for="{{item}}" wx:for-item="t"  wx:for-index="i">{{t}}---{{i}</text>
</view>

wx:if。用法和含义跟 vue 一样。

1 2	<view wx:if="{{条件表达式}}"> True </view> <view wx:if="{{age>18}}"> 成年了 </view>

wx:if-wxelif-wx:else。

1
2
3

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

小胡子语法。
1
{{msg>19?"成年了":"未成年"}}

如何 v-show, 没有，使用 hidden 来代替。

1	<view hidden="{{表达式}}"> 如果表达式成立，则隐藏该view标签 </view>

block 标签（虚拟标签，地位等同于 vue 的 template）。

# 获取 json 数据

何时获取
1. 点击按钮再获取，则写方法，在微信小程序中没有 methods 属性。
加载页面时就要获取，将其写在钩子函数中，在 onshow 之前使用，一般写在 onload 里面。
数据来源，只能使用在线数据，不能使用相对路径导入数据。

a. 本地。

b. 后台、自己搭建的平台。自己家的程序员或网站，或自己用小皮搭建后台提供。

c. 第三方、mock，别人家的。
网站的要求 (假设小程序要发布上线，需要满足以下条件)：国内备案的域名 + https。

如何获取数据。

浏览器：ajax，vue 用 axios，在微信小程序中不需要用任何插件，它自己有一套获取数据的方式。

//用法同JQ的ajax或axios
wx.request({
  url: 'test.php', //仅为示例，并非真实的接口地址
  method:"get",
  success (res) {
    console.log(res.data)
  },
  fail(err){
     console.log(err);
  }
})

# 让数据可响应

this，指的是微信页面实例。注意 this 的传递问题。
对象或数组或其他的变量的响应式操作。
1
2
3
this.setData({
老数据:新数据
});

# 本地存储（页面通信）

需求：在 A 页面添加留言后，同步到 B 页面并且展示。

方法，在数据后面添加方法即可。
页面通信

a. 本地存储：10M 的本地存储

b. url 传参
简单的双向数据绑定（兼容性问题，基础库要在一定的条件）

提示：基础库 2.9.3 开始支持，低版本需做兼容处理。
1
<input model:value="{{value}}" />

# 跳转页面的两种方式

用 navigator 标签。

用方法来实现跳转（ wx.navigator () ）。


wx.navigateTo({
      url: '/pages/add/add',
})

# 小程序的 css 单位（rpx）

可以用 px,%,rem 等常用单位，也有一个专属单位：rpx。

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx。如在 iPhone6 上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素，1rpx = 0.5px = 1 物理像素。

建议：以 750px 的 iPhone6s 设计稿为参考搞，量出来是多少，就使用多少 rpx。

假设你的设计图是 375px， 10px * 30px ==> 20rpx * 60rpx

小程序