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

目录

一、样式中如何使用background-image呢？
二、使用自适应单位rpx类似于rem,布局尽量使用flex布局 
三、万能的{{双大括号，用于在模版中输出变量
四、你想要的基础组件和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
三十七、小程序上传非图片文件功能比较尴尬

本文同步发布到 http://www.kt5.cn/fe/2019/11/04/mini-programme/

正文

一、样式中如何使用background-image呢？

background-image支持网络的图片链接或者base64

二、使用自适应单位rpx类似于rem, 布局尽量使用flex布局

UI设计模版要按750宽出图

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

样式，属性或者内容都支持{{双大括号输出

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

swiper, scroll-view,picker,switch,slider,open-data等等组件。wx.request,wx.setStorage,wx.getSystemInfo,wx.onNetworkStatusChange,wx.makePhoneCall,wx.setClipboardData,wx.getClipboardData,wx.chooseImage,wx.saveFile,wx.downloadFile,wx.openDocument,wx.getFileInfo等等API

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

tap,touchstart,touchmove,touchcancel,touchend,longpress,longtap等等

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

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

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

异步调用如setTimeout或者request请求后

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

这跟mina框架使用方式不一样，与vue也不一样

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

如可用开发工具的1.9.9调试库来测试，可能会出现如下问题：

1、不显示头像问题

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

可用设置背景为默认头像解决

2、连续多次点击触发多次navigateTo或者toast事件，解决方式是绑定变量立flag防止多次触发

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

与vue的$nextTick类似，视图更新后触发回调

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

可用onShow, onHide, onLoad, onUnload等处理，或者根据场景值有 1001, 1019, 1022, 1023, 1038, 1056进行相应的处理

其运行机制可参考：https://developers.weixin.qq.com/miniprogram/dev/framework/operating-mechanism.html

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

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

通常开发者希望转发出去的小程序被二次打开的时候能够获取到一些信息，例如群的标识。现在通过调用 wx.showShareMenu 并且设置 withShareTicket 为 true ，当用户将小程序转发到任一群聊之后，此转发卡片在群聊中被其他用户打开时，可以在 App.onLaunch() 或 App.onShow 获取到一个 shareTicket。通过调用 wx.getShareInfo() 接口传入此 shareTicket 可以获取到转发信息。

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

可使用通用的CSS3 keyframe动画

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

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)
})

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

获得opened的方式详见：https://developers.weixin.qq.com/miniprogram/dev/api/api-login.html#wxloginobject

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

可参考：https://tencent.github.io/wepy/document.html#/?id=%E6%94%AF%E6%8C%81%E5%8A%A0%E8%BD%BD%E5%A4%96%E9%83%A8npm%E5%8C%85

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

1、project.config.json

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

es6: 对应关闭ES6转ES5选项，关闭。 重要：未关闭会运行报错。

postcss: 对应关闭上传代码时样式自动补全选项，关闭。 重要：某些情况下漏掉此项也会运行报错。但上传代码时要打开，不然会有机型不适配问题

minified: 对应关闭代码压缩上传选项，关闭。重要：开启后，会导致真机computed, props.sync 等等属性失效。（注：压缩功能可使用WePY提供的build指令代替，详见后文相关介绍以及Demo项目根目录中的wepy.config.js和package.json文件。）

urlCheck: 对应不检查安全域名选项，开启。 如果已配置好安全域名则建议关闭。

2、可灵活切换 调试基础库 进行兼容性测试

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

类似window.history的机制

注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。目前页面路径最多只能十层。

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

  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，尽量控制图片的大小，不然会被微信强制压缩影响图片质量
    }
  }

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

 方案一、弹出层时给根元素添加 height: 100%;  overflow: hidden; 样式

 方案二、弱解决，不打包票的方案：catchtouchmove="preventTouchMove"，给弹层添加阻止touchmove冒泡，如果是wepy下则写成@touchmove.stop="preventTouchMove"，preventTouchMove是自定义的空函数

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

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
  }
})

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

1、使用wx:if

2、设置hidden="true"

3、设置样式opacity

4、如果是文字，可以设置font-size为0再恢复

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

一般审核时间的长短是与小程序的类别有关的，如社交类的需进行互联网主管部门的二次审核，需要一到两周的时间才能完成审核。其他工具类的可能2~3天就可以一次审核通过。

二十四、wepy中配置css autoprefix

https://github.com/Tencent/wepy/wiki/WePY-%E4%BD%BF%E7%94%A8less-autoprefix

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

 给图片链接加随时时间戳参数，或者更换图片名字

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

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

可通过wx.getSystemInfo(Object object)获得高度后计算出高度动态设置

brand	string	手机品牌	>= 1.5.0
model	string	手机型号	
pixelRatio	number	设备像素比	
screenWidth	number	屏幕宽度	>= 1.1.0
screenHeight	number	屏幕高度	>= 1.1.0
windowWidth	number	可使用窗口宽度	
windowHeight	number	可使用窗口高度	
statusBarHeight	number	状态栏的高度	>= 1.9.0
language	string	微信设置的语言	
version	string	微信版本号	
system	string	操作系统版本	
platform	string	客户端平台	
fontSizeSetting	number	用户字体大小设置。以“我-设置-通用-字体大小”中的设置为准，单位 px。	>= 1.5.0
SDKVersion	string	客户端基础库版本	>= 1.1.0
benchmarkLevel	number	(仅Android小游戏) 性能等级，-2 或 0：该设备无法运行小游戏，-1：性能未知，>=1 设备性能值，该值越高，设备性能越好 (目前设备最高不到50)	>= 1.8.0

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

 调用wx.login(Object object)获取的登录凭证（code）（有效期五分钟）。开发者需要在开发者服务器后台调用 code2Session，使用 code 换取 openid 和 session_key 等信息，与用户的openid匹配则为真人行为，不相等或者接口调用失败则为非法请求

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

如果特殊情况如同时点击提交按钮，则可通过setTimeout来处理，因为onblur取到的值会有一定的延时。

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

当需要做一个类似dialog的组件时，要控制组件显示与隐藏，要给组件定义好一个show与hide方式即可，然后在调用组件的页面调用该组件即可对组件进行显示与隐藏的控制。代码如下：

定义组件：

<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')

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

小程序中想使用图片背景一般需要先把图片转成base64码，或者使用网络网络路径，不能使用本地相对路径。

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

支付宝小程序做页面切图布局方式还非常原始 - view + css（类似传统的div+css），没有像开发微信小程序那么多框架（如wepy、mpvue等）支持。但幸好社区出现修改版的wxss-cl工具使得我们可以使用less来进行样式预处理。详细如下：

https://openclub.alipay.com/read.php?tid=12098&fid=66&ant_source=zsearch

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

比如把标签view写错成veiw可能会现现什么异常呢？如果页面节点结构复杂的话开发者工具的渲染器会卡死，如果节点简单的话，可以错误的渲染出来；这两种情况调试器都不会报错，要切换到 调试小程序开发者工具 (ctr+shift+I )  才可以看到下面这样的报错。

C:Program Files小程序开发者工具
esourcesappoutvolansworkbenchrowsercodeindex.js:1 [renderer.file][Wed Jan 02 2019 11:35:03 GMT+0800 (中国标准时间)][ERROR]d:xxxindex.axmlrecognized as binary

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

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

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

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

作者也表态了，在一开始的设计中，mixin就不支持on事件，建议使用类的继承去实现

export MyPage extends wepy.page {}

export Index extends MyPage {}

https://github.com/Tencent/wepy/issues/824

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

 可以直接使用wxs实现类似功能，或者直接使用页面上自定义的函数

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/

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

wx.showToast()与wx.hideLoading()同时调用时，wx.showToast在手机上没效果，原因应该是hideLoading不仅会作用于loading还作用于toast．

解决方案：wx.showToast()与wx.hideLoading()不同时调用，使用setTimeout延时调用wx.showToast()

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

小程序在支持上传图片时比较友好，但要传其他文件时，并没有提供相关的支持，目前可想到的方案是拉出web-view来使用h5实现上传文件的功能，但此方案的缺陷是ios根本选择不了文件，因此只能支持安卓端。比较鸡肋。

交流与学习

1. 本文作者：Nelson Kuang，别名：Fast Mover  欢迎大家留言及多多指教
2. 版权声明：欢迎转载学习 => 请标注信息来源于 http://www.cnblogs.com/fastmover/p/9321504.html
   

——