小程序开发过程中常见问题[微信小程序、支付宝小程序]

三、万能的{{双大括号，用于在模版中输出变量

四、你想要的基础组件和API，微信的mina框架和通用API都给你准备好了

五、使用wepy框架，这里没有click，只有tap,longpress和touchend等等

六、使用wepy框架全局的东西都可以丢到app.wpy中，如globalData

七、异步更新数据后记得调用this.$apply()更新视图

八、使用wepy框架时，绑定类似tap的原生事件函数都要放到methods里面，其他的放外面

九、版本低的微信常见的一些兼容性问题

十、this.$nextTick用法与Vue类似

十一、小程序是有常驻缓存机制，要善于调用生命周期函数处理

十二、onShareAppMessage中的success与fail已失效，但可以追踪定义分享后的点击

十三、CSS3动画可以大胆使用，如animate.css动画库

十四、要考虑网络异常情况的处理

十五、wx.login登录取得code然后给后端去跟微信请求获得openid和uniqeId

十六、在Wepy中，使用npm安装外部依赖包有坑，处理较为麻烦，可把原码全部引入处理

十七、微信开发工具使用过程中常见问题

十八、小程序路由支持层数有限。因此，要善用navigateTo，redirectTo，reLaunch和navigateBack

十九、小程序分享图片设置的问题

二十、小程序弹出层解决滚动穿透问题，与web端的类似

二十一、设置好网络异常处理

二十二、设置元素显隐一般的方式

二十三、小程序发包提审时审核时间过长问题

二十四、wepy中配置css autoprefix

二十五、url图片无法清除缓存问题

二十六、小程序的scroll-view纵向滚动要设一个固定高度的样式如height:100px才能生效，如何实现自适应高度？

二十七、借助调用 wx.login() 获取 临时登录凭证code 来进行人机识别及接口防刷

二十八、手写输入法输入后如果不点选中文字，oninput取到的值不全，会缺失；可以通过onblur取到的值补全

二十九、自定义组件的显示与隐藏一般方式

三十、小程序背景图片的使用问题

三十一、支付宝小程序布局样式编写优先使用less来进行预处理

三十二、支付宝小程序页面布局时写错标签会出现什么奇葩情况？

三十三、使用Wepy编写的组件，引用时参数中传函数时，函数中的this指向组件本身

三十四、wepy的页面中mixins定义onShareAppMessage无效问题

三十五、wepy中缺少模板过滤器的解决方式

三十六、微信小程序wx.showToast()与wx.hideLoading()同时使用的bug

三十七、小程序上传非图片文件功能比较尴尬

globalData = {
userInfo: null,
fetch: fetch, // 把fetch绑到全局使用
API: API, // 把API绑到全局使用
Base64: new Base64(), // 把Base64绑到全局使用
isLoading: true
}

<open-data type="userAvatarUrl" ></open-data>

onShareAppMessage: (res) => {
if (res.from === 'button') {
console.log("来自页面内转发按钮");
console.log(res.target);
}
else {
console.log("来自右上角转发菜单")
}
return {
title: '标题',
path: '/pages/index',
imageUrl: "/images/1.jpg"
}
}

constructor() { // 1、通过接口拦截了解网络情况
super()
this.use('requestfix')
// this.use('promisify')
// 拦截request请求
this.intercept('request', {
// 发出请求时的回调函数
config (p) {
// 对所有request请求中的OBJECT参数对象统一附加时间戳属性
// p.timestamp = +new Date();
// console.log('config request: ', p)
// 必须返回OBJECT参数对象，否则无法发送请求到服务端
return p
}, // 请求成功后的回调函数
success (p) {
// 可以在这里对收到的响应数据对象进行加工处理
// console.log('request success: ', p)
// 必须返回响应数据对象，否则后续无法对响应数据进行处理
return p
}, //请求失败后的回调函数
fail (p) {
// console.log('request fail: ', p)
// 必须返回响应数据对象，否则后续无法对响应数据进行处理
return p
}, // 请求完成时的回调函数(请求成功或失败都会被执行)
complete (p) {
// console.log('request complete: ', p)
}
});
}

wx.getNetworkType({ // 2、通过网络类型
success: function(res) {
// 返回网络类型, 有效值：
// wifi/2g/3g/4g/unknown(Android下不常见的网络类型)/none(无网络)
var networkType = res.networkType
}
})

wx.onNetworkStatusChange(function(res) { // 3、监听网络变化
console.log(res.isConnected)
console.log(res.networkType)
})

{
"description": "project description",
"setting": {
"urlCheck": true,
"es6": false,
"postcss": false,
"minified": false
},
"compileType": "miniprogram",
"appid": "touristappid",
"projectname": "Project name",
"miniprogramRoot": "./dist"
}

globalData = { // wepy开发中在app.wpy文件中全局定义好分享内容
shareInfo: {
title: '我的标题',
path: '/pages/index',
imageUrl: '../images/share.jpg' // 图片比例5:4，如500*400，尽量控制图片的大小，不然会被微信强制压缩影响图片质量
}
}

// 分享方案设置
onShareAppMessage (res) {
const shareInfo = this.$parent.globalData.shareInfo // 全局设置分享内容
return {
title: shareInfo.title,
path: shareInfo.path,
imageUrl: shareInfo.imageUrl // 图片比例5:4，如500*400，尽量控制图片的大小，不然会被微信强制压缩影响图片质量
}
}

wx.onNetworkStatusChange(function(res) {
console.log(res.isConnected) // 网络连后如何处理，需不需要重新登录wx.login
console.log(res.networkType) // 输出网络类型 wifi/2g/3g/4g/unknown(Android下不常见的网络类型)/none(无网络)
})wx.getNetworkType({
success: function(res) {
// 返回网络类型, 有效值：
// wifi/2g/3g/4g/unknown(Android下不常见的网络类型)/none(无网络)
var networkType = res.networkType
}
})

`${url}?t=${String(new Date().valueOf())}`

brandstring手机品牌>= 1.5.0
modelstring手机型号
pixelRationumber设备像素比
screenWidthnumber屏幕宽度>= 1.1.0
screenHeightnumber屏幕高度>= 1.1.0
windowWidthnumber可使用窗口宽度
windowHeightnumber可使用窗口高度
statusBarHeightnumber状态栏的高度>= 1.9.0
languagestring微信设置的语言
versionstring微信版本号
systemstring操作系统版本
platformstring客户端平台
fontSizeSettingnumber用户字体大小设置。以“我-设置-通用-字体大小”中的设置为准，单位 px。>= 1.5.0
SDKVersionstring客户端基础库版本>= 1.1.0
benchmarkLevelnumber(仅Android小游戏) 性能等级，-2 或 0：该设备无法运行小游戏，-1：性能未知，>=1 设备性能值，该值越高，设备性能越好 (目前设备最高不到50)>= 1.8.0

<style lang="less">
</style>
<template>
<view class="my-dlg" wx:if="{{show}}">
</view>
</template>
<script>
import wepy from 'wepy'export default class MyDlg extends wepy.component {
props = {
} data = {
show: false
}
events = {
} methods = {
showDlg () {
this.show = true
},
closeDlg () {
this.show = false
}
} onLoad () {
}
}
</script>

// 先把myDlg组件import到页面中，定义好，然后可以这样控制组件
this.$invoke('myDlg', 'showDlg')

C:\Program Files\小程序开发者工具\resources\app\out\volans\workbench\browser\code\index.js: [renderer.file][Wed Jan :: GMT+ (中国标准时间)][ERROR]d:\xxx\index.axmlrecognized as binary

<my-component
:onOk="onMyComponentOk"
/>

onMyComponentOk () {
console.log(this) // 输出组件对象
console.log(this.$parent) // 输出当前组件的上面的调用方对象
}

export MyPage extends wepy.page {}export Index extends MyPage {}