之前在segmentfalut社区写得,移到自己的博客来~~

一.前言:

最近公司要做一个小程序,之前也没接触过,但是用过Vue框架,就直接上手了,毕竟思想是很像的。
但是微信小程序的坑还是有的,今天就讲一下思路,如果有需求可以出详细的文章。有错的地方请大家纠正。

二. 微信限制

  • 说下微信的限制
    • 下面切换的tab不能超过5个
    • 父页面和子页面的关系不能超过5个
    • 上线打包后的文件不能超过2M
    • 不允许跳转第三方链接(这个很重要,导致很多功能实现不了)
    • 不能给按钮直接下载APP
    • 内嵌H5只能展示,不能对其进行操作
    • 小程序里面没有DOM
    • 小程序不能用本地的图片做背景图

三. 遇到的难点

  • 渲染HTML
    • ​问题:后台给我返回HTML的代码,让我在小程序里渲染
    • 难点:小程序不支持DOM
    • 方案:大神写的 wxParse 可以渲染DOM节点
  • 二维码生成
    • 问题:要根据后台给的URL动态生成二维码
    • 难点:小程序不支持DOM
    • 方案:大神写的 qrcode
  • 微信API问题
    • 问题:微信的下载文件的API有问题 wx.downloadFile() PC上可以用,移动端用不了,而且URL还要用一个域名下
    • 方案:因为我们是要下载图,微信有一个预览图片的API,这个长按可以下载 wx.previewImage()图片
  • template模板的使用注意点

    • 使用:
      1. App.json文件里不能引入模板文件 如:page/template/teplate
      2. 在父页面的 wxml和wxss文件引入template想对应的wxml和wxss文件
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
         // Wxml文件:
        ​<import src="../tampmask/tampmask.wxml" />
        <template is="tampmask" data="{{show}}”/>
        // 注意上面结束标签的斜杠!!

        // 对应的tampmask模板:
        <template name="tampmask"></template>

        // WXss文件:
        ​ @import '../tampmask/tampmask.wxss’;

        // js文件:
        模板里的template.js是不会渲染到 template.js要写在引入模板文件上面
  • ​为了避免错误,引号尽量有双引号。

  • 在子页面是可以设置全局的变量的,引入APP()这个对象
  • 微信是可以实现下拉刷新的功能的,微信是有下拉的API的,可以通过获取的值来显示隐藏刷新

四.构建意见

  • 如果内嵌H5 的页面比较多,不要每个页面都写一个页面,一个模块引入一个文件,在根据传进来的值判断显示哪个,否则会很乱
  • 样式可以引入weui库,契合微信的样式
  • 双花括号里面不能用toFixed()等函数,要先在js里转化,再在双花括号里渲染
  • 关于登录注册,微信可以直接获取手机号码,不用特地弄个登录注册页
  • 判断是否登录的值可以放在全局的变量里,也可以放在localstroge里面(但是建议放在全局变量里面)。
  • 关于模板,一个把所有模板写在同一个template文件下面,不用写多个,用不同的name来区分和引用,这样比较清晰,便于管理

谢谢大家,如果有问题可以一起探讨