css
-
本地资源无法通过 WXSS 获取，
background-image：可以使用网络图片，或者 base64，或者使用image标签 -
能使用
calc:height: calc(100% - 100rpx); -
官方组件的样式可以通过
!important覆盖 -
button组件默认都加了一个border，该button控件上有一个伪元素（::after），设置了border，只要把button::after 的border 属性去掉就可以了，
/*去掉按钮边框*/ button::after { border: 0; } /*去掉button默认样式*/ button { border-radius: 0; background-color: transparent; padding: 0; margin: 0; } -
修改radio框的样式:先把radio组件隐藏起来，自己写自定义样式和选中样式，再在data中设置一个选中的变量，来显示是否显示选中样式
<radio-group class="radioGroup" bindchange="radioChange"> <label class="radio" wx:for="{{items}}" wx:key="id"> <!-- 自定义的radio样式 --> <view class='radioPoint'> <view class='radioDefault'> <view class="{{radioCheckVal==item.id?'radioActive':''}}"></view> </view> </view> <view class='radioText'> {{item.value}}</view> <!-- 隐藏默认的radio样式 --> <radio value="{{item.id}}" hidden="true" checked="{{item.checked}}" /> </label> </radio-group>Page({ /* 页面的初始数据 */ data: { items: [ { id: 1, value: '选项1' }, { id: 2, value: '选项2' }, ], radioCheckVal: null }, radioChange: function (e) { this.setData({ radioCheckVal: e.detail.value }) }, }) -
在微信小程序内的文字无法长按复制，除了text节点以外。但要在text标签内加一个“selectable”属性。
<text selectable='true' ><text/>
js
-
setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。
- 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
- 单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。
- 请不要把 data 中任何一项的 value 设为 undefined ，否则这一项将不被设置并可能遗留一些潜在问题。
-
小程序里面的打开的页面，请求需要是https协议，websocket协议需要是wss协议
-
按小程序右上角退出小程序和按home键退出微信，小程序里面的ws连接都不会断
-
小程序通过按钮点击分享，无法做到先发起网络请求获取某些信息再进行分享的功能，因为onShareAppMessage方法必须要return一个对象，不能放在wx.request回调里面return，必须事先获取。
//分享到个人/群判断方法 Page({ onShareAppMessage: function () { //设置withShareTicket: true才能获取shareTickets信息 wx.showShareMenu({ withShareTicket: true }) return { title: '分享标题', path: '/pages/index/index', imageUrl: '', success: (res) => { // 转发成功 if (res.hasOwnProperty('shareTickets')) { // 转发到群 wx.getShareInfo({ shareTicket: res.shareTickets[0], success: (res) => { //encryptedData,iv发送给后台解密，获取到openGId }, fail: function (res) { console.log('获取微信分享信息失败') } }) } else { // 转发到个人 } }, fail: function (res) { // 转发失败 } } }, }) -
隐藏小程序导航栏方法，在app.json中配置navigationStyle：
{ "pages": [], "window": { "navigationStyle": "custom" } } -
微信sdk分享的链接中不能含有中文字符，否则不能自定义分享，一定要把分享的链接encode一下
-
处理退出小程序的操作：目前没有提供这样的接口，但是可以用wx.navigateBack()做处理，将跳转层级设为最大跳转数量即可。
wx.navigateBack({delta:20}) -
涉及到经常切换的需要用
hidden来实现样式切换，不要用wx:if，用这个切换的时候会导致闪烁问题 -
自定义组件里面的wxss不会影响到页面的样式，所以不能继承自定义组件里面的样式
-
获取dataset:获取最外层dataset通过
event.currentTarget.dataset就可以获取，里面的子元素就不用写上data-，而不用event.target.dataset获取<view class="btn" bindtap="tapNav" data-nav="1"> </view> <view class="btn" bindtap="tapNav" data-nav="1"> <view data-nav="2"></view> </view> // 读取当前执行事件的view data-nav值打印出来 // 第一个打出1 // 第二个如果点击的位置是子view的话，会打印出2. tapNav:function(event){ console.log(event.target.dataset.nav) //2 console.log(event.currentTarget.dataset.nav) //1 }, -
生命周期执行顺序：
onLoad->onShow->onReady -
授权和登录是两回事。登录是用户无感知的，获取到
code和后端通信获得openid来定位用户。而授权才能获取用户头像和名字等信息 -
在不授权的情况下，可以通过open-data获取用户基本信息，在微信
6.6.1版本中获取不了，并且基础库1.9.90版本才开始支持，遇到需要显示用户信息的地方还是需要手动授权，不能依赖于open-data。<button open-type="getUserInfo" bindgetuserinfo="getUserInfo"></button> -
无论是
bindscrolltoupper还是bindscrolltoupper做上拉下拉刷新都需要注意这两个事件是会多次调用的。需要一个标识符来拦截多次调用。下拉刷新建议用 page 的 -
this.setData()修改数据是异步的，因此不能用它来做上下拉刷新的标识符 -
页面路径只能是五层，请尽量避免多层级的交互方式。
-
路由传递参数bug: 比较长的字符串作为参数应该放在最后。
const TestUserData = { header: "https://pic.qiushibaike.com/system/avtnew/3422/34228569/thumb/20170914201113.JPEG?imageView2/1/w/90/h/90", name: "哈哈哈哈", text: "红鲤鱼和绿鲤鱼与驴", } // 跳转之后只能读取到header wx.navigateTo({ url: `../result/result?header=${TestUserData.header}&name=${TestUserData.name}&text=${TestUserData.text}`, }) // 跳转之后三个参数都能读取 wx.navigateTo({ url: `../result/result?name=${TestUserData.name}&text=${TestUserData.text}&header=${TestUserData.header}`, }) -
授权弹窗如果用户很久不响应的话，就会调用失败
-
transform: translate(0,100rpx);一个绝对定位的布局会撑开page节点 -
路由跳转bug:经过测试，因为页面跳转是有动画时效的，在动画进行中当前页面还能操作。如果双击当前跳转按钮机会进行两次跳转。第二次点击的时候小程序内置的路由栈是已经定位到了新的页面了，而这时候在按照原来的路由栈去定位当前页面，因此会报错。所以页面跳转按钮需要进行短时间多次点击的限制
素材
- 素材引入使用相对路径
- 支持
image内src放置svg。但是不支持直接在wxml里面直接使用svg - 录音音频，旧版的是
silk格式,和公众号开发的时候一致。而新版可以自己选择aac
网友评论