目录

一、样式中如何使用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

  1. globalData = {
  2. userInfo: null,
  3. fetch: fetch, // 把fetch绑到全局使用
  4. API: API, // 把API绑到全局使用
  5. Base64: new Base64(), // 把Base64绑到全局使用
  6. isLoading: true
  7. }

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

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

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

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

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

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

1、不显示头像问题

  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已失效,但可以追踪定义分享后的点击

  1. onShareAppMessage: (res) => {
  2. if (res.from === 'button') {
  3. console.log("来自页面内转发按钮");
  4. console.log(res.target);
  5. }
  6. else {
  7. console.log("来自右上角转发菜单")
  8. }
  9. return {
  10. title: '标题',
  11. path: '/pages/index',
  12. imageUrl: "/images/1.jpg"
  13. }
  14. }

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

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

可使用通用的CSS3 keyframe动画

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

  1. constructor() { // 1、通过接口拦截了解网络情况
  2. super()
  3. this.use('requestfix')
  4. // this.use('promisify')
  5. // 拦截request请求
  6. this.intercept('request', {
  7. // 发出请求时的回调函数
  8. config (p) {
  9. // 对所有request请求中的OBJECT参数对象统一附加时间戳属性
  10. // p.timestamp = +new Date();
  11. // console.log('config request: ', p)
  12. // 必须返回OBJECT参数对象,否则无法发送请求到服务端
  13. return p
  14. },
  15.  
  16. // 请求成功后的回调函数
  17. success (p) {
  18. // 可以在这里对收到的响应数据对象进行加工处理
  19. // console.log('request success: ', p)
  20. // 必须返回响应数据对象,否则后续无法对响应数据进行处理
  21. return p
  22. },
  23.  
  24. //请求失败后的回调函数
  25. fail (p) {
  26. // console.log('request fail: ', p)
  27. // 必须返回响应数据对象,否则后续无法对响应数据进行处理
  28. return p
  29. },
  30.  
  31. // 请求完成时的回调函数(请求成功或失败都会被执行)
  32. complete (p) {
  33. // console.log('request complete: ', p)
  34. }
  35. });
  36. }
  1. wx.getNetworkType({ // 2、通过网络类型
  2. success: function(res) {
  3. // 返回网络类型, 有效值:
  4. // wifi/2g/3g/4g/unknown(Android下不常见的网络类型)/none(无网络)
  5. var networkType = res.networkType
  6. }
  7. })
  1. wx.onNetworkStatusChange(function(res) { // 3、监听网络变化
  2. console.log(res.isConnected)
  3. console.log(res.networkType)
  4. })

十五、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

  1. {
  2. "description": "project description",
  3. "setting": {
  4. "urlCheck": true,
  5. "es6": false,
  6. "postcss": false,
  7. "minified": false
  8. },
  9. "compileType": "miniprogram",
  10. "appid": "touristappid",
  11. "projectname": "Project name",
  12. "miniprogramRoot": "./dist"
  13. }

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 方法则不会。目前页面路径最多只能十层

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

  1. globalData = { // wepy开发中在app.wpy文件中全局定义好分享内容
  2. shareInfo: {
  3. title: '我的标题',
  4. path: '/pages/index',
  5. imageUrl: '../images/share.jpg' // 图片比例5:4,如500*400,尽量控制图片的大小,不然会被微信强制压缩影响图片质量
  6. }
  7. }
  1. // 分享方案设置
  2. onShareAppMessage (res) {
  3. const shareInfo = this.$parent.globalData.shareInfo // 全局设置分享内容
  4. return {
  5. title: shareInfo.title,
  6. path: shareInfo.path,
  7. imageUrl: shareInfo.imageUrl // 图片比例5:4,如500*400,尽量控制图片的大小,不然会被微信强制压缩影响图片质量
  8. }
  9. }

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

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

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

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

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

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

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图片无法清除缓存问题

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

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

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

  1. 可通过wx.getSystemInfo(Object object)获得高度后计算出高度动态设置
  1. brand string 手机品牌 >= 1.5.0
  2. model string 手机型号
  3. pixelRatio number 设备像素比
  4. screenWidth number 屏幕宽度 >= 1.1.0
  5. screenHeight number 屏幕高度 >= 1.1.0
  6. windowWidth number 可使用窗口宽度
  7. windowHeight number 可使用窗口高度
  8. statusBarHeight number 状态栏的高度 >= 1.9.0
  9. language string 微信设置的语言
  10. version string 微信版本号
  11. system string 操作系统版本
  12. platform string 客户端平台
  13. fontSizeSetting number 用户字体大小设置。以“我-设置-通用-字体大小”中的设置为准,单位 px >= 1.5.0
  14. SDKVersion string 客户端基础库版本 >= 1.1.0
  15. 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方式即可,然后在调用组件的页面调用该组件即可对组件进行显示与隐藏的控制。代码如下:

定义组件:

  1. <style lang="less">
  2. </style>
  3. <template>
  4. <view class="my-dlg" wx:if="{{show}}">
  5. </view>
  6. </template>
  7. <script>
  8. import wepy from 'wepy'
  9.  
  10. export default class MyDlg extends wepy.component {
  11. props = {
  12. }
  13.  
  14. data = {
  15. show: false
  16. }
  17. events = {
  18. }
  19.  
  20. methods = {
  21. showDlg () {
  22. this.show = true
  23. },
  24. closeDlg () {
  25. this.show = false
  26. }
  27. }
  28.  
  29. onLoad () {
  30. }
  31. }
  32. </script>

调用组件

  1. // 先把myDlg组件import到页面中,定义好,然后可以这样控制组件
  2. 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 )  才可以看到下面这样的报错。

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

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

  1. <my-component
  2. :onOk="onMyComponentOk"
  3. />
  1. onMyComponentOk () {
  2. console.log(this) // 输出组件对象
  3. console.log(this.$parent) // 输出当前组件的上面的调用方对象
  4. }

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

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

  1. export MyPage extends wepy.page {}
  2.  
  3. 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

——

小程序开发过程中常见问题[微信小程序、支付宝小程序]的更多相关文章

  1. 在C#/.NET应用程序开发中创建一个基于Topshelf的应用程序守护进程(服务)

    本文首发于:码友网--一个专注.NET/.NET Core开发的编程爱好者社区. 文章目录 C#/.NET基于Topshelf创建Windows服务的系列文章目录: C#/.NET基于Topshelf ...

  2. 微信小程序开发过程中tabbar页面显示的相关问题及解决办法!

    在微信小程序的开发过程中如果有使用过tabbar的同学,我相信一定会遇到一些困扰.为什么有些时候代码中明明已经在app.json里面增加了tabbar,可以页面中就是不显示呢?可不可以有些页面显示ta ...

  3. js判断移动端浏览器类型,微信浏览器、支付宝小程序、微信小程序等

    起因 现在市场上各种跨平台开发方案百家争鸣各有千秋,个人认为最成熟的还是hybird方案,简单的说就是写H5各种嵌入,当然作为前端工程师最希望的也就是公司采用hybird方案当作技术路线. 所谓的hy ...

  4. 微信小程序开发过程中一些经验总结

    1.微信开发者工具报错,微信小程序最低需支持tls1.2版本的问题 原因是服务器不支持ssl的高版本,解决方法: 在/etc/nginx/conf.d文件下,把"ssl_protocols  ...

  5. 微信红包店小程序开发过程中遇到的问题 php获取附近周边商家 显示最近商家

    最近公司在做一个项目就是微信红包店.仿照的是微信官方在做的那个红包店的模式.客户抢红包,抢到以后到店消费,消费以后就可以拿到商家的红包了. 项目中的两个难点: 1通过小程序来发红包  这个之前在开发语 ...

  6. 微信小程序 开发过程中遇到的坑(一)

      2124 1.我们使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 的时候在pages中写注释的时候回报错. 例如: { &quo ...

  7. 微信小程序开发过程中出现问题及解答

    1.wx.uploadFile上传图片,控制台抛出错误"uploadFile:fail Error:Hostname/IP doesn't match certificate's altna ...

  8. 开发程序过程中遇到的调用Web Api小问题

    在用Umbraco Web Api开发程序时,前端使用React调用Web Api 当时是有一个页面Search.cshtml,把用React产生的脚本代码,在这个页面进行引用 写了一个Api, 调用 ...

  9. 拆除vs发展c++程序开发过程中产生的.ipch和.sdf文件的方法

    正在使用Visual Studio 2010发展C++当程序,你会发现,有创建一些奇怪的文件.一个叫ipch的目录,和一个与project同名的.sdf文件.并且ipch以下的文件和.sdf文件都非常 ...

随机推荐

  1. 【转载】C++ STL快速入门

    https://www.cnblogs.com/skyfsm/p/6934246.html

  2. step into,step over,step out.

    step into:单步执行,遇到子函数就进入并且继续单步执行(简而言之,进入子函数): step over:在单步执行时,在函数内遇到子函数时不会进入子函数内单步执行,而是将子函数整个执行完再停止, ...

  3. Repeater取不到服务端控件

    <td>      <asp:Button ID="Button1" runat="server" Text="查看" O ...

  4. Python面向对象之反射

    一.反射的基本概念 二.反射示例 三.反射的应用 一.反射的基本概念 反射:可以用字符串的方式去访问对象的属性,调用对象的方法(但是不能去访问方法),Python中一切皆对象,都可以使用反射. 反射有 ...

  5. BufferedReader类里面mark(int readAheadLimit)中readAheadLimit到底代表什么

    昨天用到了BufferedReader类里面mark(int readAheadLimit)方法,对于文档里面readAheadLimit的解释有些没弄懂,就翻开源码研究.具体的源码分析可以参见htt ...

  6. Python+Selenium+Unittest框架使用——Selenium——定位元素(二)

    1.定位元素(id.name.class.link.partial link) (1)find_element_by_id() 用百度定位测试,用firebug查看定位元素 ,输入框的id为“kw”, ...

  7. 有关mysql索引

    1.首先我们需要明确一下什么是索引以及为什么要使用索引: 索引在MySQL中也叫做“键”,是存储引擎用于快速找到记录的一种数据结构.在生产环境中,对于数据库我们最常进行的是查询的操作,而当我们的数据非 ...

  8. ubuntu 下开机启动项修复(进不去windows系统)

    1.终端输入: sudo gedit /etc/default/grub 2.更改: GRUB_DEFAULT=0    改为  GRUB_DEFAULT=4 GRUB_TIMEOUT=10  改为 ...

  9. python numpy 间的的数据变算公式

    import numpy as np a = np.arange(100) print(np.sum(a))#求和 print(np.mean(a))#平均值 print(np.max(a))#最大值 ...

  10. rabbitmq - (消息队列) 的基本原理介绍

    介绍 MQ全称为Message Queue, 是一种分布式应用程序的的通信方法,它是消费-生产者模型的一个典型的代表,producer往消息队列中不断写入消息,而另一端consumer则可以读取或者订 ...