微信小程序快速课02：指令和数据请求

一、微信小程序指令

1. 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>
   

2. wx:if=”{{条件表达式}}”
   跟vue中的v-if一样的用法
3. 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>
   

4. v-show如何在微信小程序中表示？？

   <view hidden="{{表达式}}"></view>
   //如果表达式为真，则隐藏该元素，否则显示该元素
   

二、如何加载独立的json文件

微信小程序是纯前端，在微信小程序中不能写任何后端代码，所以数据只能依靠传递，也就是前后端是绝对分离的。

json文件来源：

1. 项目中文件夹中的json— 微信小程序不支持本地json,也就是只能使用在线的地址（自己搭服务器或第三方的）
2. 在线地址：后端传给你的；第三方json地址；mock数据
3. 自己搭建服务器（域名方式，phpstudy）

提供数据源的要求：

1. 已经备案的域名
2. 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);
    }
});

四、案例-使用本地存储制作留言板

涉及知识点：

1. 数据的双向绑定

   <input model:value="{{value}}" />
   

2. 本地存储—vue中todolist
3. 页面间通信问题

五、跳转页面的两种方式

1. 标签 navigator

   <navigator url="地址">链接</navigator>
   

2. 使用事件

   //如何使用事件
   @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”或者微信扫描二维码都可以关注微信公众号