• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

开发微信小程序总结

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

关于这次的小程序项目,有以下一些内容需要总结一下。

  1. 开发方式
  2. 开发文档
  3. 调试方式

开发方式

由于微信小程序实际上是运行在微信App内部的,因此和通常我们所说的前端开发有点不同。(其实我并不想将小程序归于web前端这个领域中来,因为小程序被微信限制的太死了)IDE是微信自身提供的微信开发工具,我们可以利用这个IDE快速搭建项目。当然为了部署到线上,在此之前需要在微信开发后配注册小程序拿到相应的AppIDAppSecretKey
IDE界面如图所示:

根据Vue的开发经验,我将小程序的项目结构也划分成了类似的结构:包括路由,页面鉴权,api封装,静态资源,界面,项目所需的实体类,以及一些util

由于小程序的开发理念是数据驱动的,通过修改状态来让小程序本身来更新UI,这点与ReactVue相似,可是小程序原生技术并没有提供ReactVue的开发方式,也因此为了更方便的进行项目开发,不得不重复性的造轮子。

开发文档

腾讯的开发文档是真的有问题,没有一个统一的标准,好像在设计之初就是想到哪写到哪,就拿微信支付作为例子吧。

关于微信支付

微信H5开发过程中,微信支付方式是这样的:

      wx.chooseWXPay({
        // appId: data.appId,
        timestamp: data.timeStamp,
        nonceStr: data.nonceStr,
        package: data.package,
        signType: data.signType,
        paySign: data.paySign,
        success (res) {
          typeof success === 'function' && success(res)
        },
        fail (err) {
          // eslint-disable-next-line prefer-promise-reject-errors
          let error = ''
          Object.keys(err).forEach(item => {
            error += item + err[item] + '  '
          })
          typeof failed === 'function' && failed(error)
        },
        cancel () {
          typeof failed === 'function' && failed('取消支付')
        }
      })

请注意上面的timeStamp其实是小写的!
在小程序中:

     wx.requestPayment({
       timeStamp: data.timeStamp, // h5是小写的timestamp,小程序又是大写的 woc !
       nonceStr: data.nonceStr,
       package: data.package,
       signType: data.signType,
       paySign: data.paySign,
       success(res) {
         typeof success === 'function' && success(res)
       },
       fail(err) {
         // eslint-disable-next-line prefer-promise-reject-errors
         let error = ''
         Object.keys(err).forEach(item => {
           error += item + err[item] + '  '
         })
         typeof failed === 'function' && failed(error)
       }
     })

调试方式

微信小程序的调试方式也可能是我没有get到正确方式,在涉及后台API复杂请求的时候,微信开发工具就不好使了。

只能通过真机调试来调试,这就比较坑,问题是还比较慢…

小程序和Vue

由于之前的项目是Vue技术栈,小程序这个项目是通过Vue项目源码改造而来的。在改造过程中还是有这样或那样的令人崩溃的瞬间。

  1. 小程序组件的prop是可以直接修改的,而Vue不行。
  2. 小程序无法通过js改造来实现Vue的计算属性,只能通过监听globalData的修改来更新相应视图。
    但是小程序文档中也特别的提醒了我们需要判断当前界面是否可见,否则去更新UI的时候会浪费资源。也就是在onShow周期中进行属性的变化更新—
  3. 我不喜欢小程序
  4. 其他的想到再写

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap