国瑞个人博客
首页 > Small program > 微信小程序开发

微信小程序开发

微信小程序开发

 2018年09月05日 作者: 国瑞个人博客 420次浏览

小程序入手难度相对于其他的前端框架而言,小太多了,做一份笔记,参考用:
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,
    })
  }
百度已收录

点击快速分享:

以上就是国瑞前端个人博客带来的是《微信小程序开发》,感谢您的观看!

如果没有特殊的说明,本文即为国瑞前端博客原创(www.huanggr.cn),欢迎读者转载并保留本站版权!https://www.huanggr.cn/546.html

「专业前端博客,如果觉得我的文章对您有用,请帮助本站成长」

赞( 7 ) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
7

谢谢你请我吃鸡腿*^_^*

支付宝
微信
标签:

上一篇:

下一篇:

相关文章:

共有 0 条评论

博客简介

国瑞个人博客: https://www.huanggr.cn/,我们关注Web前端开发技术,web前端开发,移动前端开发,前端资讯,同时分享前端资源和工具等,期待你的参与,了解更多..

博主独立研发主题:

本站唯一QQ群

加入国瑞个人博客QQ群

本群为学习探讨群,主要和前端相关,欢迎广大前端(抱有学习目的均可)爱好者加入!广告请勿添加!

升级版本

web前端开发博客,基于vue脚手架制作的前端博客正在制作中,尽情期待,目前示例的代码位于此处

最新版本(尽请期待)-web前端开发博客

精彩评论

本站主要提供服务

二年web前端开发博客,本站专注提供web资源下载,技术问题解答,经验分享,也提供新手的web技术指导,二年前端个人博客,期待你的加入!

站点统计

  • 文章总数: 269 篇
  • 草稿数目: 50 篇
  • 分类数目: 26 个
  • 页面总数: 16 个
  • 评论总数: 216 条
  • 链接总数: 10 个
  • 标签总数: 104 个
  • 建站时间: 803 天
  • 注册用户: 659 人
  • 访问总量: 8780710 次
  • 最近更新: 2019年7月15日
-->