開發微信小程序必看（渲染HTML，動態二維碼）

一.前言：

最近公司要作一個小程序，以前也沒接觸過，可是用過Vue框架，就直接上手了，畢竟思想是很像的。
可是微信小程序的坑仍是有的，今天就講一下思路，若是有需求能夠出詳細的文章。有錯的地方請你們糾正。

二. 微信限制

• 說下微信的限制

  • 下面切換的tab不能超過5個
  • 父頁面和子頁面的關係不能超過5個
  • 上線打包後的文件不能超過2M
  • 不容許跳轉第三方連接（這個很重要，致使不少功能實現不了）
  • 不能給按鈕直接下載APP
  • 內嵌H5只能展現，不能對其進行操做
  • 小程序裏面沒有DOM
  • 小程序不能用本地的圖片作背景圖

三. 遇到的難點

• 渲染HTML

  • ​​問題：後臺給我返回HTML的代碼，讓我在小程序裏渲染
  • 難點：小程序不支持DOM
  • 方案：大神寫的 wxParse 能夠渲染DOM節點 ​https://github.com/icindy/wxP...

• 二維碼生成

  • 問題：要根據後臺給的URL動態生成二維碼
  • 難點：小程序不支持DOM
  • 方案：大神寫的 qrcode https://github.com/yingye/wea...

• 微信API問題

  • 問題：微信的下載文件的API有問題 ​`wx.downloadFile（）` PC上能夠用，移動端用不了，並且URL還要用一個域名下
  • 方案：由於咱們是要下載圖，微信有一個預覽圖片的API，這個長按能夠下載 wx.previewImage（）圖片

• template模板的使用注意點

  • 使用：

    1. App.json文件裏不能引入模板文件 如：page/template/teplate

    2. 在父頁面的 wxml和wxss文件引入template想對應的wxml和wxss文件

       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要`寫在引入模板文件上面`

• ​爲了不錯誤，引號儘可能有雙引號。
• {{}}裏不能用toFixed()等函數，要先在js裏轉化，再在{{}}裏渲染
• 在子頁面是能夠設置全局的變量的，引入APP（）這個對象
• 微信是能夠實現下拉刷新的功能的，微信是有下拉的API的，能夠經過獲取的值來顯示隱藏刷新

四.構建意見

• 若是內嵌H5 的頁面比較多，不要每一個頁面都寫一個頁面，一個模塊引入一個<web-view>文件，在根據傳進來的值判斷顯示哪一個，不然會很亂
• 樣式能夠引入weui庫，契合微信的樣式
• 關於登陸註冊，微信能夠直接獲取手機號碼，不用特意弄個登陸註冊頁
• 判斷是否登陸的值能夠放在全局的變量裏，也能夠放在localstroge裏面（可是建議放在全局變量裏面）。
• 關於模板，一個把全部模板寫在同一個template文件下面，不用寫多個，用不一樣的name來區分和引用，這樣比較清晰，便於管理

謝謝你們，若是有問題能夠一塊兒探討

blog:http://blog.beastxw.wang/2019...