微信小程序开发笔记

之前没接触过小程序开发,但工作突然开始要做小程序了,所以一边看文档一边做,只要记录一下我自己遇到的一些点。

数据参数的设置:

渲染页面数据的时候可以在要点击的节点上用data-id的方法设置参数,例如data-pid="{{item.pid}}",然后再对应的页面用e.target.dataset.pid获取。

参数设置正确,但有时候获取到的参数是undefined,这时可以把e.target换成e.currentTarget。

设置globalData

globalData可以在app.js中设置全局数据,像userInfo,UID之类的,然后在其他页面可以直接接收使用,无需再次获取。

//在app.js中
App({
   onLauch:function(){} ,
   globalData:{
    uid:xxx,
    userInfo:xxx
} 
})

//在其他页面的js里接收使用
Page({
  data:{
  uid:''
},
onLoad:function(){
  var uid=app.globalData.uid
  this.setdata({
  uid:uid
})
}
})

小程序弹窗

//小程序里是不能用alert的,只能用小程序提供的API
wx.showToast({
  title:"你要弹出的内容",
  icon:"success" //只能填success(默认)和loading,success是一个勾勾,loading是一个转圈圈的动图
  image:'imgurl' //因为微信提供了两种图标,所以这里我们可以自定义自己想要的图标,优先级比icon高,还有image只能写相对路径
})

小程序代码包最大限制为2M,所以图片尽量不要跟代码放一起,一般可以把图片上传到公司的服务器,再用绝对路径引用,或者上传到七牛云等平台。还有小程序的背景图设置也只支持绝对路径,不支持相对路径的。

如果有一些多余的代码或注释也尽量删掉,减少代码包的体积。

小程序的空格符:&nbsp; 一般是没效的;但是<text>组件有两个属性可以设置让空格符有效;

<text decode="true">&nbsp;</text>  //设置是否解码,默认为false,设置为true的时候,/t/n&nbsp;等符号就会生效
<text space="nbsp">&nbsp;</text> //设置空格符的大小

小程序轮播

切换当前轮播是通过current这个属性来实现的,值就是对应轮播图的下标。

视频轮播在开发工具上是没问题的,但是一到实机上有可能出各种问题,例如自动轮播没效,可以用图片来代替,点击的时候图片消失,对应的视频出现和播放。

小程序播放当前视频,暂停其他视频

小程序播放视频后,如果再点另外的视频,之前的视频还是会继续播放的,所以可以通过给视频设置ID,然后用wx.createVideoContext(id)来操作

(参考:https://segmentfault.com/q/1010000011197284)

原文地址:https://www.cnblogs.com/haqiao/p/8193379.html