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

时间 2019-11-15

标签程序开发过程当中常见问题微信支付宝繁體版

原文原文链接

1、样式中如何使用background-image呢？
2、使用自适应单位rpx相似于rem,布局尽可能使用flex布局
3、万能的{{双大括号，用于在模版中输出变量
4、你想要的基础组件和API，微信的mina框架和通用API都给你准备好了
5、使用wepy框架，这里没有click，只有tap,longpress和touchend等等
6、使用wepy框架全局的东西均可以丢到app.wpy中，如globalData
7、异步更新数据后记得调用this.$apply()更新视图
8、使用wepy框架时，绑定相似tap的原生事件函数都要放到methods里面，其余的放外面
9、版本低的微信常见的一些兼容性问题
10、this.$nextTick用法与Vue相似
11、小程序是有常驻缓存机制，要善于调用生命周期函数处理
12、onShareAppMessage中的success与fail已失效，但能够追踪定义分享后的点击
十3、CSS3动画能够大胆使用，如animate.css动画库
十4、要考虑网络异常状况的处理
十5、wx.login登陆取得code而后给后端去跟微信请求得到openid和uniqeId
十6、在Wepy中，使用npm安装外部依赖包有坑，处理较为麻烦，可把原码所有引入处理
十7、微信开发工具使用过程当中常见问题
十8、小程序路由支持层数有限。所以，要善用navigateTo，redirectTo，reLaunch和navigateBack
十9、小程序分享图片设置的问题
二10、小程序弹出层解决滚动穿透问题，与web端的相似
二11、设置好网络异常处理
二12、设置元素显隐通常的方式
二十3、小程序发包提审时审核时间过长问题
二十4、wepy中配置css autoprefix
二十5、url图片没法清除缓存问题
二十6、小程序的scroll-view纵向滚动要设一个固定高度的样式如height:100px才能生效，如何实现自适应高度？
二十7、借助调用 wx.login() 获取临时登陆凭证code 来进行人机识别及接口防刷
二十8、手写输入法输入后若是不点选中文字，oninput取到的值不全，会缺失；能够经过onblur取到的值补全
二十9、自定义组件的显示与隐藏通常方式
三10、小程序背景图片的使用问题
三11、支付宝小程序布局样式编写优先使用less来进行预处理
三12、支付宝小程序页面布局时写错标签会出现什么奇葩状况？
三十3、使用Wepy编写的组件，引用时参数中传函数时，函数中的this指向组件自己
三十4、wepy的页面中mixins定义onShareAppMessage无效问题
三十5、wepy中缺乏模板过滤器的解决方式
三十6、微信小程序wx.showToast()与wx.hideLoading()同时使用的bug
三十7、小程序上传非图片文件功能比较尴尬

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

正文

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

background-image支持网络的图片连接或者base64php

2、使用自适应单位rpx相似于rem, 布局尽可能使用flex布局

UI设计模版要按750宽出图css

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

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

4、你想要的基础组件和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等等APIvue

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

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

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

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

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

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

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

这跟mina框架使用方式不同，与vue也不同git

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

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

一、不显示头像问题github

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

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

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

10、this.$nextTick用法与Vue相似

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

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

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

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

12、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 能够获取到转发信息。

十3、CSS3动画能够大胆使用，如animate.css动画库

可以使用通用的CSS3 keyframe动画

十4、要考虑网络异常状况的处理

constructor() { // 一、经过接口拦截了解网络状况
    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({ // 二、经过网络类型
  success: function(res) {
    // 返回网络类型, 有效值：
    // wifi/2g/3g/4g/unknown(Android下不常见的网络类型)/none(无网络)
    var networkType = res.networkType
  }
})

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

十5、wx.login登陆取得code而后给后端去跟微信请求得到openid和uniqeId

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

十6、在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

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

一、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: 对应不检查安全域名选项，开启。若是已配置好安全域名则建议关闭。

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

十8、小程序路由支持层数有限。所以，要善用navigateTo，redirectTo，reLaunch和navigateBack

相似window.history的机制

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

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

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

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

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

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

二11、设置好网络异常处理

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

二12、设置元素显隐通常的方式

一、使用wx:if

二、设置hidden="true"

三、设置样式opacity

四、若是是文字，能够设置font-size为0再恢复

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

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

二十4、wepy中配置css autoprefix

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

二十5、url图片没法清除缓存问题

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

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

二十6、小程序的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

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

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

二十8、手写输入法输入后若是不点选中文字，oninput取到的值不全，会缺失；能够经过onblur取到的值补全

若是特殊状况如同时点击提交按钮，则可经过setTimeout来处理，由于onblur取到的值会有必定的延时。

二十9、自定义组件的显示与隐藏通常方式

当须要作一个相似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')

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

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

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

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

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

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

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

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

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

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

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

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

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

export MyPage extends wepy.page {}

export Index extends MyPage {}

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

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

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

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

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

wx.showToast()与wx.hideLoading()同时调用时，wx.showToast在手机上没效果，缘由应该是hideLoading不只会做用于loading还做用于toast．

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

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

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

交流与学习

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

——