微信小程序开发

6

小程序入手难度相对于其他的前端框架而言,小太多了,做一份笔记,参考用: 1、app.json中的pages下面的引入路径就是一个个页面,命名的时候pages文件夹下的文件叫啥名,里…

小程序入手难度相对于其他的前端框架而言,小太多了,做一份笔记,参考用:
1、app.json中的pages下面的引入路径就是一个个页面,命名的时候pages文件夹下的文件叫啥名,里面的文件就要叫啥名,否则就会报错
2、wxml相当于网页的html,wxss相当于css样式,js就是js
3、主目录下面的app.json中的pages表示的就是当前注册的页面,不注册页面会报错
4、app.json中的window表示的就是当前窗口的一些属性
5、小程序中使用的技术和Vue相差无几,基本是一样的
6、小程序中请求接口的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//下面的示例方法表示的是根据页面传入的id来对数据进行请求
  loadDetail(id){
    console.log('id==='+id);
    //创建请求
    wx.request({
      //设置请求地址
      url: 'https://data.miaov.com/h5-view/v/movie/detail?id='+id,
       //请求成功后返回的值
      success:(res)=>{
        console.log(res.data);
        this.setData({
          detail: res.data
        })
      }
    })
  }

7、小程序中修改值的方法

1
2
3
4
        //里面放置修改的值即可
        this.setData({
          detail: res.data
        })

8、当接口非本域名的时候,会报(不在以下 request 合法域名列表中,请参考文档 解决方法)这句话,在调试环境,我们直接点击右上角的详情,在弹出的框中选择最下面的不校验合法域名即可

9、微信中内置了正在加载和加载完成的功能,他们是:

1
2
3
4
5
6
7
8
    //加载调用默认正在加载框  mask为true页面就不能拖动了
    wx.showLoading({
      title:"正在拼命加载中…",
      mask:true
    })

    //加载完成
    wx.hideLoading()

使用的时候可以将正在加载放置在函数最开始的位置,加载完成放置在函数后面(接口加载的后面),一般情况下,调用接口放置在生命周期函数最开始的位置,保证加载的顺利运行

10、小程序中scroll-view(滑动组件的使用)
scroll-y=”true” 表示y轴可以移动
style=”height:100%” 设置宽度,与屏幕同高
lower-threshold=”200″ 距离底部200px的时候触发
bindscrolltolower=”lower” 触发的事件名字叫做lower,这个函数一般用作触发更新页面(也就是分页效果),这个时候就需要将数据拼接起来,可以使用…,打散数组push进原来的数组

1
2
3
<scroll-view scroll-y="true" style="height:100%" lower-threshold="200" bindscrolltolower="lower">

</scroll-view>

11、小程序中的循环方法是wx.for=”{{data}}” 里面直接就是值,然后默认每一项都是item ,外面都需要添加双大括号
12、bindtap=”tap”表示绑定的是tap这个函数,data-id=”{{item.id}}”这个小程序内置的对象是可以访问到这个属性的

1
2
3
4
5
6
7
  tap(e){
   //访问data-id中的属性
    console.log(e.currentTarget.dataset.id);
    wx.navigateTo({
      url: '/pages/detail/detail?id=' + e.currentTarget.dataset.id,
    })
  }

作者: huanggr

为您推荐

7

发表评论

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