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

本次课提纲:
一、微信小程序常用指令
二、如何加载独立的json文件
三、如何请求数据
四、如何让视图响应式的变化
五、案例-使用本地存储给卡片应用添加留言板
六、微信小程序单位rpx

一、微信小程序指令

  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”或者微信扫描二维码都可以关注微信公众号

WEB前端全栈圈

除特别声明外, 本站所有内容皆为原创,未经许可,禁止转载。转载时请务必以超链接形式标明文章出处和作者信息
  • 2,290
(0)
打赏 微信扫一扫 微信扫一扫
                       

关于作者:

web前端老罗

贡献:已经在WEB前端圈发表90篇文章了

简介:前端老罗是一位拥有多年web前端开发经验、管理经验、教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。加我微信:imqdcnn可提供开发、技术咨询、答疑、直播讲座等服务

Ta的专栏 | Ta的站点 | 其他SNS

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关于WEB前端圈

我是前端人(imqd.cn)愿景是不管你是想学习前端还是一名专业的WEB前端工程师在这里都能找到你想要的物料。定位为前端人学习进步的一个平台。在这里你能找到前端学习笔记、教学视频资源、案例、前后端分离、前端框架、低代码平台、可视化数据、多端开发、全栈开发等跟前端有关的一切资源!

关于站长:WEB前端老罗(罗老师)是一位拥有多年web前端开发经验、管理经验、IT培训教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。右边加我微信可提供开发、技术咨询、答疑、直播讲座等服务

WEB前端圈二维码

右边添加老罗微信一对一免费私聊
拉你加入官方微信答疑群

To top