这里只对小程序开发中遇到的问题做了个记录,如有错误之处,请给与指正,也不想误导了别人。
1.请求php后台接口,返回json数据多出双引号以及隐藏字符
网上说是php bom头问题,写成了UTF-8+BOM
,改为UTF-8
就可以了。或者返回的json数据使用JSON.parse(res.data.trim())
处理下。
参考博文:微信小程序,请求php后台返回json数据多出隐藏字符问题
2.button 的border 无法覆盖
本以为使用
border:none;
就可以将button的border隐藏了,但是发现还是存在,尤其在IOS系统更明显。原来button默认的border是放在::after
中的,默认为border:1px solid rgba(0, 0, 0, 0.2)
。应修改::after
内的值。
// app.wxss
button::after{
border: 0;
}
参考博文:关于小程序button控件上下边框的显示和隐藏问题
3.分享给好友,记录分享记录
// 分享给好友
onShareAppMessage: function () {
return {
title: this.data.win ? '怪我太优秀!' : '憾负!',
path: `pages/index/index?share_id=${this.data.id}`,
success: function (res) {
// 转发成功
console.log(res)
},
fail: function (res) {
// 转发失败
console.log(res)
}
}
}
// 好友点击分享的链接进入小程序可以拿到分享人的id
// app.js
onLoad(options){
options.query.share_id
}
4.打开外链
小程序提供了<web-view></web-view>
组件,
定义一个Page页,里面放一个<web-view>
,从上一页拿到地址link,默认铺满屏幕,就ok了
<web-view src="{{link}}"></web-view>
5.图片按钮自定义点击态
用空的<navigator></navigator>
包起来,自定义点击态背景添加hover-class
属性即可,虽然控制台会警告VM5865:2 <navigator/> should have url attribute when using navigateTo, redirectTo or switchTab
,但是不影响效果,忽略就好。
6.音频播放
一开始是用的<audio>
标签,出现有很多bug。原来没看清文档:1.6.0 版本开始,该组件不再维护。建议使用能力更强的wx.createInnerAudioContext
接口。
Page({
onReady: function () {
// 创建audio
this.audioCtx = wx.createInnerAudioContext()
this.audioCtx.autoplay = true
this.audioCtx.src =""
},
// 播放音效
playAudio(name) {
this.audioCtx.src = baseUrl + name + '.mp3';
this.audioCtx.play()
}
})
7.上线
腾讯对小程序有很多开发运营规范,比如服务类目。提交审核时,因为有视频播放功能,但是没有这个类目。提交审核后,发回消息:贵方小程序涉及在线观看视频,请补充选择文娱-视频类目,并在基础信息处申请该类目,通过资质审核并在配置功能页添加符合该类目的功能页面。
浪费了不必要的时间,影响了产品的按时上线。所以要细读 微信小程序平台运营规范