小程序开发过程中的注意点
前言
小程序是腾讯推出的运行在微信端的,具有离线能力的程序,基于网页技术开发而成。目前市面上还有类似的基于某一个平台或软件的应用,如:支付宝小程序,百度小程序和快应用。
小程序安卓端运行在x5引擎, ios端运行在系统浏览器内核,因此支持es5和css,但也有一些限制。
小程序采用自定义的组件标签,这不同于html标签,提供双向绑定的语法,数据驱动,和vue有类似的地方。
小程序开发可以使用原生的语法,也可以采用wepy,mpvue,和taro。
小程序单包(压缩后)大小不能超过2M,采用分包后总包不能超过8M。
相关:
组件
小程序只能使用小程序提供的组件,分为基础组件
和native组件
,像视频和地图就是native组件。
native组件
是原生实现的,因此它们的层级比基础组件高,会对基础组件产生遮盖,开发时要注意避开遮盖。
css
不能使*
选择器
样式 background:url('')
不能使用本地图片, 但标签image
可以使用本地图片
webview
小程序可以使用webview,webview铺满整个窗口,且标题显示为网页的标题
但是:个人项目
和海外项目
不能使用。可以在开发工具里面进行预览,但是无法在手机上查看,提示:''不支持打开非业务域名 请重新配置'' 。要使用webview进行浏览网页,需要在后台配置,具体配置参见官方文档,需要设置业务域名,设置过的域名才能被加载,还需要在服务器根目录放置校验文件。个人项目后台无法配置此项目,因此个人项目无法使用webview。
小程序网页可以向小程序发送消息,只支持网页向小程序主动
发送消息
小程序能够监听网页的onload
和onerror
事件
小程序网页console.log
在开发工具控制台没有打印
小程序webview组件和其他组件在页面可以共存,但是其他组件会接收不到触摸消息,绑定事件无效,webview组件全屏显示。
转发(分享)
小程序的转发,也就是分享。
小程序可以在右上角按钮点击分享,也可以点击应用内部的按钮进行分享(需要用button按钮,加上属性open-type="share"
)。
除了可以分享本页面之外的页面,可以定制分享文案和图片
页面内要有 onShareAppMessage
这个钩子函数,才有分享的选项。
可以根据参数里的from
字段判断分享点击的来源。
onShareAppMessage(object){
//这个参数结构如下
if (object.from === 'button') {
}
console.log(object.target);//分享目标的一些信息
//返回一个数据结构体
return {
title: '金香黄金', //分享标题
path: '/page/index', //分享被点 击后进入的页面
imageUrl : '../images/img_about_jinxiang.png' //分享图 比例5:4 可以使用远程图片,本地图片
}
}
可以显示分享选项
wx.showShareMenu() //具体参数见文档
可以更新分享选项
wx.updateShareMenu() //具体参数见文档
可以隐藏默认的分享,但是此接口不影响按钮点击的分享
wx.hideShareMenu({
success : function(){ //成功
},
failed: function(){ //失败
},
complete: function(){//完成,成功和失败都调用
}
})
不过值得注意的是 :小程序只能分享成小程序,没有办法分享成h5或者图片,小程序也不能被分享到朋友圈
如果要想分享成h5,可以用折中的方案:生成二维码,把二维码图保存到本地,再手动分享,这要利用canvas
这个组件。
模板消息(推送)
小程序具有推送的能力,但是触发推送要满足以下条件
支付 当用户在小程序内完成过支付行为,可允许开发者向用户在7天内推送有限条数的模板消息(1次支付可下发3条,多次支付下发条数独立,互相不影响)
提交表单 当用户在小程序内发生过提交表单行为且该表单声明为要发模板消息的,开发者需要向用户提供服务时,可允许开发者向用户在7天内推送有限条数的模板消息(1次提交表单可下发1条,多次提交下发条数独立,相互不影响)
用户授权
只有用户主动点击了按钮授权才能够拿到用户的 昵称
头像
这些数据。
开发过程中如果需要用户授权,先检测用户是否已经授权,如果没有授权则弹出相关界面让用户点击授权,点击按钮必须是button
类型,同时它的open-type
是"getuserinfo"
,这样才能弹出微信授权窗口。
使用mpvue的要点
mpvue会监听变化编译成小程序代码,有时也会卡住,长时间等待,这时候一般是报错了,但是编译窗口不会提示。 出现这种问题一般有以下几种情况:
- 代码格式错了,eslint没过
- 组件使用错误,引入了组件,但是组件标签名错误,这个时候不会报错,界面卡住。
Comments