小程序緩存的坑

1. 微信小程序開發中遇到的坑及解決辦法

taro單獨為某個項目切換taro版本環境

單獨為某一個項目升級#這樣做的好處是全局的 Taro 版本還是 1.x 的，多個項目間的依賴不沖突，其餘項目依然可以用舊版本開發。 如果你的項目里沒有安裝 Taro CLI，你需要先裝一個：

# 如果你使用 NPM

$ npm install --save-dev @tarojs/[email protected]

# 如果你使用 Yarn

$ yarn add -D @tarojs/[email protected]

echarts在小程序中滑動卡頓

由於微信小程序中，echarts的層級最高，無論設置多大層級也無法遮住echarts。而且小程序中好像只能用echarts吧。所以為了解決這個bug，我只能委屈求全了。打開ec-canvas.wxml文件，將touchStart、touchMove和touchEnd去掉了，直接刪除就好啦。這三個事件應該是做縮放的吧，我們也沒有這個縮放的需求。所以就去掉了。雖然暫時滿足的需求，還是沒有真正的解決問題。

原：

bindinit="init"

bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}"

bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}"

bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"

現：

bindinit="init"

echarts在小程序中無法跟隨頁面滑動

在卡頓問題中能與echarts交互少的，可以直接使用圖片代替cannvas，即在echarts渲染完畢後將它替換為一張圖片。

如果我更新了數據，那麼就重新放出echarts，等它渲染完畢後，再次替換為一張圖片。

chart.on('finished', () => {

getCurrentInstance().page.selectComponent(id).canvasToTempFilePath({

success: res => {

console.log('res.tempFilePath====',res.tempFilePath)

this.setState({

echartImgSrc: res.tempFilePath

      })

},

    fail: res =>console.log('轉換圖片失敗', res)

});

})

render:

this.state.echartImgSrc =='' ?

  ref={this.refChart}

id={this.state.id}

canvas-id="mychart-area"

  force-use-old-canvas="true"

  ec={this.state.ec}

/>

:

<CoverImage src={this.state.echartImgSrc}></CoverImage>

2. 微信小程序H5頁面緩存問題處理

微信小程序會緩存H5頁面，導致頁面升級之後不能及時刷新。

這種情況通過配置nginx不緩存靜態頁面無法影響到小程序緩存。

假設H5請求地址是 https://xxx/h5/

用戶進入小程序之後生成一個數字，請求H5時把數字拼接到URL後綴即可。

例： https://xxx/h5/222/

3. 微信小程序webview的緩存問題

小程序webview的頁面緩存會影響開發中的調試和生產中的使用

1.頁面緩存由瀏覽器緩存引起，那麼可以通過設置來修改瀏覽器緩存。
可以通過nginx設置cache-control 來關閉瀏覽器緩存

2.由於是單頁面應用，所以只需要對index.html設置即可。
對index.html中的資源地址，也會存在緩存，可以通過webpack構建時加入hash值解決。

4. 小程序之緩存

每個微信小程序都可以有自己的本地緩存，可以通過 wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync）可以對本地緩存進行設置、獲取和清理。同一個微信用戶，同一個小程序 storage 上限為 10MB。localStorage 以用戶維度隔離，同一台設備上，A 用戶無法讀取到 B 用戶的數據。

1.設置緩存

2.獲取緩存

3.清除緩存

5. 微信小程序開發——本地緩存

本地緩存是指微信小程序存儲在當前設備空間里地數據。在官方文檔說明中，其所有的數據存儲上限為10MB即單個小程序的存儲空間上限為10MB。==在使用過程中用戶使用本地緩存可以存儲一些非重要性的生產操作，例如讓小程序再次打開能快速渲染頁面，減少用戶等待時間。

小程序提供了讀寫刪本地緩存的方法：

關於同步緩存和非同步緩存的區別
非同步與同步的區別是，非同步不會阻塞當前任務，同步緩存直到同步方法處理完才能繼續往下執行。

寫入本地緩存

根據key讀取本地緩存

根據key移除本地緩存

清除本地所有緩存

最後，還要注意的一點是如果寫入了同樣key的緩存數據，後寫的會覆蓋了前者，因此需要我們注意一下

6. 小程序開發有哪些坑

1. JSON 配置文件小程序中，包含唯一的全局配置文件app.json，以及每個頁面的配置文件page.json。每單頁頁面相應的 JSON 文件會覆蓋與app.json相同的配置項。如下，是一個包含了所有配置選項的簡單配置app.json。"pages": [ //設置頁面的路徑"pages/index/index", //不需要寫index.wxml,index.js,index,wxss,框架會自動尋找並整合"pages/logs/logs"],"window": { //設置默認窗口的表現形式

"navigationBarBackgroundColor": "#ffffff", //頂部導航欄背景色
"navigationBarTextStyle": "black", //頂部導航文字的顏色 black/white
"navigationBarTitleText": "微信介面功能演示", //頂部導航的顯示文字
"backgroundColor": "#eeeeee", //窗口的背景色
"backgroundTextStyle": "light", //下拉背景字體、loading 圖的樣式，僅支持 dark/light
"enablePullDownRefresh": "false"， //是否支持下拉刷新 ，不支持的話就直接不寫！
"disableScroll": true, // 設置true不能上下滾動，true/false，注意！只能在 page.json 中有效，無法在 app.json 中設置該項。},"tabBar": { //底部tab或者頂部tab的表現，是個數組，最少配置2個，最多5個
"list": [{ //設置tab的屬性，最少2個，最多5個
"pagePath": "pages/index/index", //點擊底部 tab 跳轉的路徑
"text": "首頁", //tab 按鈕上的文字
"iconPath": "../img/a.png", //tab圖片的路徑
"selectedIconPath": "../img/a.png" //tab 在當前頁，也就是選中狀態的路徑
}, { "pagePath": "pages/logs/logs", "text": "日誌"
}], "color": "red", //tab 的字體顏色
"selectedColor": "#673ab7", //當前頁 tab 的顏色，也就是選中頁的
"backgroundColor": "#2196f3", //tab 的背景色
"borderStyle": "white", //邊框的顏色 black/white
"position": "bottom" //tab處於窗口的位置 top/bottom
},"networkTimeout": { //默認都是 60000 秒一分鍾
"request": 10000, //請求網路超時時間 10000 秒
"downloadFile": 10000， //鏈接伺服器超時時間 10000 秒
"uploadFile": "10000", //上傳圖片 10000 秒
"downloadFile": "10000" //下載圖片超時時間 10000 秒
},"debug": true //項目上線後，建議關閉此項，或者不寫此項

2. JS 邏輯層

小程序的邏輯層由 JavaScript 語言完成。但因為小程序不在瀏覽器中運行，所以 JS 在 web 瀏覽器中的一些函數不能用，如document、window等。

app.js有全局的小程序生命周期，page.js有自己本頁面的生命周期。

2.1 注冊小程序app.js

這一步驟，有這幾個需要注意的地方：

• 必須在app.js中，使用app()函數注冊微信小程序。全局小程序中，只能注冊一次；

• 不能在app()內的函數中調用getApp()（小程序實例），使用this就可以拿到小程序的實例；

• 不要在onLaunch的時候getCurrentPage()，因為此時page還沒有生成；

• 通過其他子頁面調用getApp()獲取實例後，不要私自調用小程序全局的生命周期方法；

• 可以通過var app=getApp()獲取小程序的實例。

• app ( { // 小程序生命周期的各個階段


• onLaunch: function(){},//當小程序初始化完成時，會觸發 onLaunch（全局只觸發一次）


• onShow: function(){},//當小程序啟動，或從後台進入前台顯示，會觸發 onShow


• onHide: function(){},//當小程序從前台進入後台隱藏，會觸發 onHide


• onError: function(){},//當小程序發生腳本錯誤，或者 api 調用失敗時，會觸發 onError 並帶上錯誤信息


• // 自定義函數或者屬性，用 this可以訪問


• ...


• })



2.2 注冊小程序的頁面page.js

Page()用來注冊一個頁面，維護該頁面的生命周期以及數據。

• Page({ data: { //頁面的初始數據//調用：{{text}} {{array[0].msg}}


• text: 'init data', array: [{ msg: '1'


• }, { msg: '2'


• }]


• }, // 頁面生命周期的各個階段


• onLoad: function () {}, //生命周期函數--監聽頁面載入


• onShow: function () {}, //生命周期函數--監聽頁面初次渲染完成


• onReady: function () {}, //生命周期函數--監聽頁面顯示


• onHide: function () {}, //生命周期函數--監聽頁面隱藏


• onUnload: function () {}, //生命周期函數--監聽頁面卸載


• onPullDownRefresh: function () {}, //頁面相關事件處理函數。如果需要監聽用戶下拉動作，需要 在app.json中配置 "enablePullDownRefresh":"true" 允許上拉刷新


• onReachBottom: function () {}, //頁面上拉觸底事件的處理函數


• onShareAppMessage: function () { //用戶點擊右上角分享


• return { title: '自定義分享標題', desc: '自定義分享描述', path: '/page/user?id=123'


• }


• }, // 自定義函數或者屬性如：


• customData: { hi: 'MINA'


• }...


• })



2.3 公共模塊util.js

公共模塊方法需要通過mole.exports對外暴露介面，使用的時候需要利用require(path)，將文件引入。如：

• function sayHello(name) {//公共方法util類


• console.log(`Hello ${name} !`)


• }mole.exports.sayHello = sayHello//用mole.exports 對外暴露介面


• //先引入文件，是新建的一個 utils 包，公共方法在 util.js 裡面var util = require('../../utils/util.js')


• Page({//調用類


• onLoad: function () {// 使用時，用 util 引用名調用，如：util.sayHello()


• util.sayHello('我是傳的值');


• }


• })



2.4 數據操作

setData()不能直接操作數據，例如this.data.text="xxxxx"就是錯誤的。你需要在this.setData ()之中，進行數據的操作。

同時，這里有作用域的問題。比如，需要在局部函數中使用，就需要.bind(this)。

如果你需要操作全局的數據，你需要在 app.js 中進行相應設置，例如：

• App({// app.js


• globalData: 1})// 某 page.jsconsole.log(getApp().globalData)



3. 視圖層 WXML

視圖層的數據綁定均來自於Page中的data，想要修改相應值，你需要用到this.setData。數據綁定使用兩對花括弧，將變數名包起來。

3.1 條件渲染

你可以利用if和else，在視圖層上編寫在特定情況下，出現的不同的視圖結果。

• <view wx:if="{{zhenjiaa=='123'}}">123334</view><view wx:if="{{zhanjia}}">123334</view><view wx:if="{{len > 5}}">大於5我就顯示了 </view><view wx:if="{{length > 5}}"> 1 </view><view wx:elif="{{length > 2}}"> 2 </view><view wx:else> 3 </view><block wx:if="{{true}}"><view> view1 </view><view> view2 </view></block>



很多人會將 CSS 中的display: hidden屬性，將其做一個比較。

• 微信小程序中的wx:if是惰性的。如果不符合渲染條件，它不會渲染相應部分；

• 使用display: hidden時，元素始終渲染，只是視圖層上沒有顯示，用戶看不見。

如果你的小程序有元素顯示頻繁切換的需求，建議你使用display: hidden，能夠為用戶提供能順暢的使用體驗。

3.2 列表渲染

相當於讓 WXML 處理一個循環。

在 WXML 中，你可以這樣來建立一個 for 循環：

<view wx:for="{{array}}"> {{index}}:{{item}} </view>

然後在相應的 JS 中，新建一個數組：

• page.jsPage({ data: {


• array: [1, 2, 3, 4, 5]


• }


• })



需要注意的是，如果列表中的項需要動態添加到列表中，並希望項目保持原有的特徵和狀態，那麼你應該使用wx:key。

wx:key有兩種形式：

• 字元串：wx:key="unique"

• 保留關鍵字：wx:key="*this"

3.3 運算

WXML 可以執行簡單的運算任務。例如：

<view> {{a + b}} + {{c}} + d </view>

也可以做到字元串拼接：

<view>{{"hello" + name}}</view>

甚至，你可以使用...在 WXML 中展開對象。

3.4 模板

name定義組件模版的名稱，引用模版的時候使用is屬性指定模版的名字，is可以進行簡單的三目運算，需要傳入模版需要的data數據。

因為模版擁有自己的作用域，所以只能使用 data 傳入數據，而不接受雙花括弧的寫法。

• <template name="msgItem"><view><text> {{index}}: {{msg}} </text><text> Time: {{time}} </text></view></template><!-- 其他代碼 --><template is="msgItem" data="{{...item}}"/>



3.5 公共模塊的引用

WXML 提供import和include兩種文件引用方式。

import有作用域的概念，不能多重引用。

• <!-- B.wxml --><import src="a.wxml"/><!-- A.wxml --><template name="A">


• <text> A template </text></template>



而include就可以多重引用了。

• <!--引用 header、其中 header.wxml 中也引用了 footer.wxml--><include src="header.wxml"/><view> body </view><!-- header.wxml --><view> header </view><include src="footer.wxml"/>



3.6 事件

名稱以bind開頭的事件不阻止冒泡，名稱以catch開頭的事件冒泡是阻止的。如bindTap和catchTab。

在 WXML 中，可以使用dataset定義data中的數據，會通過事件傳遞。它的事件以data-開頭，多個單詞以-鏈接，如data-a-b。

需要注意的是，使用這種方式定義的變數不能有大寫。它會自動轉成駝峰命名，調取的時候去駝峰命名的名字。

4. WXSS

WXSS 的用法類似於 CSS，並在 CSS 的基礎上，擴展了 rpx 尺寸單位和樣式導入功能。

WXSS 可以使用內聯樣式，但這樣會影響渲染速度。

每個頁面自己的page.wxss樣式表，會覆蓋全局樣式表app.wxss。

7. 總結微信小程序中遇到的一些坑

然後再index頁面的onload中判斷顯示哪個tab

wepy文檔
1，Q: 怎麼在page組件和 component 組件中回去到 getApp() ,就是app裡面定義的函數,通過 this.$parent 只能拿到數據，拿不到方法?
A:可以在 this.$parent 的 _proto 上拿到方法,即 this.$parent.onLogin
2, Q:怎麼實現按需載入
A:在 compoent 組件中自定義生命周期函數,並手動觸發

8. 釘釘小程序(E應用)開發踩坑

  a、在釘釘開發平台創建小程序，並將自己的釘釘賬號設置為開發人員;
  b、在IDE中登錄，關聯應用;
  c、上傳完成後，即可在釘釘開發平台將上傳版本設置為體驗版。

   npm install lodash // 安裝第三方包
   import lodash from 'lodash' // 載入第三方 npm 模塊
  註： 可能報錯 error:cannot read property 'prototype' of undefined;
  建議： import get from 'lodash/get' 單獨引入用到的工具類

  編譯失敗查看日誌,通常是超過5M,是將根目錄下的debug.log一起編譯到項目中了，所以直接刪除這個debug.log就可以編譯通過了

  釘釘小程序E應用在發版時會有一個老版本的緩存,每次發版後直接打開E應用,其實訪問的是上一個版本的緩存,這個緩存會在發版後10分鍾左右自動更新成最新版本,如果想要直接看到最新版本,可以退出釘釘登錄賬戶,並殺掉釘釘進程,這樣再進去後就是直接訪問的最新版本了.