微信小程序笔记

微信小程序笔记

1、跳转页面的方法

如果跳转到tabbar页面可以使用wx.switchtab方法。

  jumpyi(){
wx.switchTab({
  url: '../yixian/yixian',
})
  },

如果点击后有返回界面，就用wx.navigateTo方法。用于父子组件

goToAbout:function(options){
    wx.navigateTo({
      url: '../about/about',
    })

  },

如果点击后不想有返回按钮，就可以用wx.redirectTo方法。

goToAbout:function(options){
    wx.redirectTo({
      url: '../about/about',
    })

  },

2、如何引入字体图标

首先去iconfont官网，选择想要引入的图标添加入库，然后点击添加至项目，

然后点击生成在线链接，点击font class，然后访问这个链接。

然后右键，另存为到你的微信小程序根目录下，后缀名改成wxss。

在app.wxss里输入@import‘你的文件名字’

然后输入一个text标签，让class=iconfont 后面加上图标的名字。

3、wx：for渲染

打开js文件，在onLoad生命周期函数里获取数据，使用wx.request方法发起http网络请求，url=后台地址，method是http请求方法，success是获取成功后进行的回调函数，fail是失败后的回调函数。

postsList是data里的一个空数组。

然后让在view里写入wx:for="{{postsList}}"

这是可以加入wx:key来消除威胁。在微信小程序里item是默认的渲染值，也可以通过wx：for-item来改变这个值，想要渲染的值就是{{item.属性}}

4、点击查看大头像

给想要点击的图片一个bindtap属性，然后定义值，在创建一个data-src=图片的路径，在js文件里创建一个方法，首先查看传过来的参数

我们会发现target下的dataset下的src是我们想找的值，然后利用wx.previewMedia方法，让url=参数.target,dataset.src

如果这时点击会有两个事件发生，建议使用catchtap来不在向上冒泡

5、下拉获取最新数据

在js里找到onReachBottom这个函数，使用wx.showLoading来做一个提示语句，然后找到获取数据的函数，使用concat方法，一旦下拉到底，就会让postsList获取最新的数据

然后在末尾输入wx.hideLoading()来关闭提示语句。