本次课提纲：
一、微信小程序常用指令
二、如何加载独立的json文件
三、如何请求数据
四、如何让视图响应式的变化
五、案例-使用本地存储给卡片应用添加留言板
六、微信小程序单位rpx
一、微信小程序指令
- wx:for=”{{json}}”
1.如何修改item和index的名字 <div wx:for="{{数组或对象}}" wx:for-item="自定义的item名" wx:for-index="自定义的index名"></div> //用的时候，请使用自定义的名字 2.如何实现循环嵌套 //外循环 <view wx:for="{{arr}}"> 第{{index}}行： //内循环，将item中的每一项改下名字 <text wx:for="{{item}}" wx:for-item="t"> {{t}} </text> </view> - wx:if=”{{条件表达式}}”
跟vue中的v-if一样的用法 - wx:if , wx:elif，wx:else
<view wx:if="{{length > 5}}"> 1 </view> <view wx:elif="{{length > 2}}"> 2 </view> <view wx:else> 3 </view> - v-show如何在微信小程序中表示？？
<view hidden="{{表达式}}"></view> //如果表达式为真，则隐藏该元素，否则显示该元素
二、如何加载独立的json文件
微信小程序是纯前端，在微信小程序中不能写任何后端代码，所以数据只能依靠传递，也就是前后端是绝对分离的。
json文件来源：
- 项目中文件夹中的json— 微信小程序不支持本地json,也就是只能使用在线的地址（自己搭服务器或第三方的）
- 在线地址：后端传给你的；第三方json地址；mock数据
- 自己搭建服务器（域名方式，phpstudy）
提供数据源的要求：
- 已经备案的域名
- https方式访问
何时加载json文件？？
在渲染DOM之前，也就是要将加载数据放在onshow之前的生命周期钩子函数中。
一般放在生命周期函数onload即可。
onload(){
//加载ajax
//request的语法同JQ的ajax或同axios的写法
wx.request({
url:'/数据地址',
success:function(res){
console.log(res);
},
error:function(err){
console.log(err);
}
});
}
如何加载以上文件：需要调用微信的ajax方法【重点】
vue用的是第三方的插件：axios
微信小程序有一套自己的加载数据的方式，不需要借助任何第三方插件。
https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html
//写在微信页面的js中
wx.request({
});
三、如何让视图响应式的变化？？
不管是数组还是对象，只要是数据发生了改变，需要让视图也跟着改变，就必须要使用setData方法来重刷。
this.setData({
老数据:新数据
})
//比如：
wx.request({
url:"在线的json地址",
method:"get|post",
success:res=>{
this.setData({
olddata:res.data
});
},
error:function(err){
console.log(err);
}
});
四、案例-使用本地存储制作留言板
涉及知识点：
- 数据的双向绑定
<input model:value="{{value}}" /> - 本地存储—vue中todolist
- 页面间通信问题
五、跳转页面的两种方式
- 标签 navigator
<navigator url="地址">链接</navigator> - 使用事件
//如何使用事件 @click在微信中怎么写 @click="事件函数" //小程序 bindtap="事件函数" 点击事件 bindinput="事件函数" 输入事件跳转到指定的页面的方法
//wxml <button bindtap="jump()">点击调整</button> //js jump(){ wx.navigator({ url:'目的地址' }) }
六、微信小程序单位rpx
可以用px,%,rem等常用单位，也有一个专属单位：rpx（responsive pixel）:
可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
建议：以750px的iPhone6s设计稿为参考搞，量出来是多少，就使用多少rpx.
本次课笔记+作业链接:
此资源下载链接已被无情的隐藏，请输入验证码解锁：
请关注本站公众号回复“验证码”，获取验证码。
在微信里搜索“WEB前端全栈圈”或者“imqdcn”或者微信扫描二维码都可以关注微信公众号
