无码人妻精一区二区三区,eeuss影院www在线观看,无码精品久久久久久人妻中字,日韩av高清在线看片

正文

一、樣式中如何使用background-image呢？

background-image支持網(wǎng)絡(luò)的圖片鏈接或者base64

 

二、使用自適應(yīng)單位rpx類似于rem, 布局盡量使用flex布局

UI設(shè)計模版要按750寬出圖

 

三、萬能的{{雙大括號，用于在模版中輸出變量

樣式，屬性或者內(nèi)容都支持{{雙大括號輸出

 

四、你想要的基礎(chǔ)組件和API，微信的mina框架和通用API都給你準(zhǔn)備好了

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

  globalData = {
    userInfo: null,
    fetch: fetch, // 把fetch綁到全局使用
    API: API, // 把API綁到全局使用
    Base64: new Base64(), // 把Base64綁到全局使用
    isLoading: true
  }

 

七、異步更新數(shù)據(jù)后記得調(diào)用this.$apply()更新視圖

異步調(diào)用如setTimeout或者request請求后

 

八、使用wepy框架時，綁定類似tap的原生事件函數(shù)都要放到methods里面，其他的放外面

這跟mina框架使用方式不一樣，與vue也不一樣

 

九、版本低的微信常見的一些兼容性問題

如可用開發(fā)工具的1.9.9調(diào)試庫來測試，可能會出現(xiàn)如下問題：

1、不顯示頭像問題

<open-data type="userAvatarUrl" ></open-data>

可用設(shè)置背景為默認(rèn)頭像解決

2、連續(xù)多次點擊觸發(fā)多次navigateTo或者toast事件，解決方式是綁定變量立flag防止多次觸發(fā)

 

十、this.$nextTick用法與Vue類似

與vue的$nextTick類似，視圖更新后觸發(fā)回調(diào)

 

十一、小程序是有常駐緩存機制，要善于調(diào)用生命周期函數(shù)處理

可用onShow, onHide, onLoad, onUnload等處理，或者根據(jù)場景值有 1001, 1019, 1022, 1023, 1038, 1056進行相應(yīng)的處理

其運行機制可參考：https://developers.weixin.qq.com/miniprogram/dev/framework/operating-mechanism.html

 

十二、onShareAppMessage中的success與fail已失效，但可以追蹤定義分享后的點擊

  onShareAppMessage: (res) => {
    if (res.from === 'button') {
      console.log("來自頁面內(nèi)轉(zhuǎn)發(fā)按鈕");
      console.log(res.target);
    }
    else {
      console.log("來自右上角轉(zhuǎn)發(fā)菜單")
    }
    return {
      title: '標(biāo)題',
      path: '/pages/index',
      imageUrl: "/images/1.jpg"
    }
  }

通常開發(fā)者希望轉(zhuǎn)發(fā)出去的小程序被二次打開的時候能夠獲取到一些信息，例如群的標(biāo)識?，F(xiàn)在通過調(diào)用 wx.showShareMenu 并且設(shè)置 withShareTicket 為 true ，當(dāng)用戶將小程序轉(zhuǎn)發(fā)到任一群聊之后，此轉(zhuǎn)發(fā)卡片在群聊中被其他用戶打開時，可以在 App.onLaunch() 或 App.onShow 獲取到一個 shareTicket。通過調(diào)用 wx.getShareInfo() 接口傳入此 shareTicket 可以獲取到轉(zhuǎn)發(fā)信息。

 

十三、CSS3動畫可以大膽使用，如animate.css動畫庫

可使用通用的CSS3 keyframe動畫

 

十四、要考慮網(wǎng)絡(luò)異常情況的處理

constructor() { // 1、通過接口攔截了解網(wǎng)絡(luò)情況
    super()
    this.use('requestfix')
    // this.use('promisify')
    // 攔截request請求
    this.intercept('request', {
      // 發(fā)出請求時的回調(diào)函數(shù)
      config (p) {
        // 對所有request請求中的OBJECT參數(shù)對象統(tǒng)一附加時間戳屬性
        // p.timestamp = +new Date();
        // console.log('config request: ', p)
        // 必須返回OBJECT參數(shù)對象，否則無法發(fā)送請求到服務(wù)端
        return p
      },

      // 請求成功后的回調(diào)函數(shù)
      success (p) {
        // 可以在這里對收到的響應(yīng)數(shù)據(jù)對象進行加工處理
        // console.log('request success: ', p)
        // 必須返回響應(yīng)數(shù)據(jù)對象，否則后續(xù)無法對響應(yīng)數(shù)據(jù)進行處理
        return p
      },

      //請求失敗后的回調(diào)函數(shù)
      fail (p) {
        // console.log('request fail: ', p)
        // 必須返回響應(yīng)數(shù)據(jù)對象，否則后續(xù)無法對響應(yīng)數(shù)據(jù)進行處理
        return p
      },

      // 請求完成時的回調(diào)函數(shù)(請求成功或失敗都會被執(zhí)行)
      complete (p) {
        // console.log('request complete: ', p)
      }
    });
  }

wx.getNetworkType({ // 2、通過網(wǎng)絡(luò)類型
  success: function(res) {
    // 返回網(wǎng)絡(luò)類型, 有效值：
    // wifi/2g/3g/4g/unknown(Android下不常見的網(wǎng)絡(luò)類型)/none(無網(wǎng)絡(luò))
    var networkType = res.networkType
  }
})

wx.onNetworkStatusChange(function(res) { // 3、監(jiān)聽網(wǎng)絡(luò)變化
  console.log(res.isConnected)
  console.log(res.networkType)
})

 

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

 

十七、微信開發(fā)工具使用過程中常見問題

1、project.config.json

{
  "description": "project description",
  "setting": {
    "urlCheck": true,
    "es6": false,
    "postcss": false,
    "minified": false
  },
  "compileType": "miniprogram",
  "appid": "touristappid",
  "projectname": "Project name",
  "miniprogramRoot": "./dist"
}

es6: 對應(yīng)關(guān)閉ES6轉(zhuǎn)ES5選項，關(guān)閉。 重要：未關(guān)閉會運行報錯。

postcss: 對應(yīng)關(guān)閉上傳代碼時樣式自動補全選項，關(guān)閉。 重要：某些情況下漏掉此項也會運行報錯。但上傳代碼時要打開，不然會有機型不適配問題

minified: 對應(yīng)關(guān)閉代碼壓縮上傳選項，關(guān)閉。重要：開啟后，會導(dǎo)致真機computed, props.sync 等等屬性失效。（注：壓縮功能可使用WePY提供的build指令代替，詳見后文相關(guān)介紹以及Demo項目根目錄中的wepy.config.js和package.json文件。）

urlCheck: 對應(yīng)不檢查安全域名選項，開啟。 如果已配置好安全域名則建議關(guān)閉。

2、可靈活切換 調(diào)試基礎(chǔ)庫 進行兼容性測試

 

十八、小程序路由支持層數(shù)有限。因此，要善用navigateTo，redirectTo，reLaunch和navigateBack

類似window.history的機制

注意：調(diào)用 navigateTo 跳轉(zhuǎn)時，調(diào)用該方法的頁面會被加入堆棧，而 redirectTo 方法則不會。目前頁面路徑最多只能十層。

 

十九、小程序分享圖片設(shè)置的問題

  globalData = { // wepy開發(fā)中在app.wpy文件中全局定義好分享內(nèi)容
    shareInfo: {
      title: '我的標(biāo)題',
      path: '/pages/index',
      imageUrl: '../images/share.jpg' // 圖片比例5:4，如500*400，盡量控制圖片的大小，不然會被微信強制壓縮影響圖片質(zhì)量
    }
  }

  // 分享方案設(shè)置
  onShareAppMessage (res) {
    const shareInfo = this.$parent.globalData.shareInfo // 全局設(shè)置分享內(nèi)容
    return {
      title: shareInfo.title,
      path: shareInfo.path,
      imageUrl: shareInfo.imageUrl // 圖片比例5:4，如500*400，盡量控制圖片的大小，不然會被微信強制壓縮影響圖片質(zhì)量
    }
  }

 

二十、小程序彈出層解決滾動穿透問題，與web端的類似

 方案一、彈出層時給根元素添加 height: 100%;  overflow: hidden; 樣式

 方案二、弱解決，不打包票的方案：catchtouchmove="preventTouchMove"，給彈層添加阻止touchmove冒泡，如果是wepy下則寫成@touchmove.stop="preventTouchMove"，preventTouchMove是自定義的空函數(shù)

 

二十一、設(shè)置好網(wǎng)絡(luò)異常處理

wx.onNetworkStatusChange(function(res) {
  console.log(res.isConnected) // 網(wǎng)絡(luò)連后如何處理，需不需要重新登錄wx.login
  console.log(res.networkType) // 輸出網(wǎng)絡(luò)類型 wifi/2g/3g/4g/unknown(Android下不常見的網(wǎng)絡(luò)類型)/none(無網(wǎng)絡(luò))
})

wx.getNetworkType({
  success: function(res) {
    // 返回網(wǎng)絡(luò)類型, 有效值：
    // wifi/2g/3g/4g/unknown(Android下不常見的網(wǎng)絡(luò)類型)/none(無網(wǎng)絡(luò))
    var networkType = res.networkType
  }
})

 

二十二、設(shè)置元素顯隱一般的方式

1、使用wx:if

2、設(shè)置hidden="true"

3、設(shè)置樣式opacity

4、如果是文字，可以設(shè)置font-size為0再恢復(fù)

 

二十三、小程序發(fā)包提審時審核時間過長問題

一般審核時間的長短是與小程序的類別有關(guān)的，如社交類的需進行互聯(lián)網(wǎng)主管部門的二次審核，需要一到兩周的時間才能完成審核。其他工具類的可能2~3天就可以一次審核通過。

 

二十四、wepy中配置css autoprefix

https://github.com/Tencent/wepy/wiki/WePY-%E4%BD%BF%E7%94%A8less-autoprefix

 

二十五、url圖片無法清除緩存問題

 給圖片鏈接加隨時時間戳參數(shù)，或者更換圖片名字

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

 

二十六、小程序的scroll-view縱向滾動要設(shè)一個固定高度的樣式如height:100px才能生效，如何實現(xiàn)自適應(yīng)高度？

可通過wx.getSystemInfo(Object object)獲得高度后計算出高度動態(tài)設(shè)置

brand	string	手機品牌	>= 1.5.0
model	string	手機型號	
pixelRatio	number	設(shè)備像素比	
screenWidth	number	屏幕寬度	>= 1.1.0
screenHeight	number	屏幕高度	>= 1.1.0
windowWidth	number	可使用窗口寬度	
windowHeight	number	可使用窗口高度	
statusBarHeight	number	狀態(tài)欄的高度	>= 1.9.0
language	string	微信設(shè)置的語言	
version	string	微信版本號	
system	string	操作系統(tǒng)版本	
platform	string	客戶端平臺	
fontSizeSetting	number	用戶字體大小設(shè)置。以“我-設(shè)置-通用-字體大小”中的設(shè)置為準(zhǔn)，單位 px。	>= 1.5.0
SDKVersion	string	客戶端基礎(chǔ)庫版本	>= 1.1.0
benchmarkLevel	number	(僅Android小游戲) 性能等級，-2 或 0：該設(shè)備無法運行小游戲，-1：性能未知，>=1 設(shè)備性能值，該值越高，設(shè)備性能越好 (目前設(shè)備最高不到50)	>= 1.8.0

 

二十七、借助調(diào)用 wx.login() 獲取 臨時登錄憑證code 來進行人機識別及接口防刷

 調(diào)用wx.login(Object object)獲取的登錄憑證（code）（有效期五分鐘）。開發(fā)者需要在開發(fā)者服務(wù)器后臺調(diào)用 code2Session，使用 code 換取 openid 和 session_key 等信息，與用戶的openid匹配則為真人行為，不相等或者接口調(diào)用失敗則為非法請求

 

二十八、手寫輸入法輸入后如果不點選中文字，oninput取到的值不全，會缺失；可以通過onblur取到的值補全

如果特殊情況如同時點擊提交按鈕，則可通過setTimeout來處理，因為onblur取到的值會有一定的延時。

 

二十九、自定義組件的顯示與隱藏一般方式

當(dāng)需要做一個類似dialog的組件時，要控制組件顯示與隱藏，要給組件定義好一個show與hide方式即可，然后在調(diào)用組件的頁面調(diào)用該組件即可對組件進行顯示與隱藏的控制。代碼如下：

定義組件：

 

<style lang="less">
</style>
<template>
  <view class="my-dlg" wx:if="{{show}}">
  </view>
</template>
<script>
import wepy from 'wepy'

export default class MyDlg extends wepy.component {
  props = {
  }

  data = {
    show: false
  }
  events = {
  }

  methods = {
    showDlg () {
      this.show = true
    },
    closeDlg () {
      this.show = false
    }
  }

  onLoad () {
  }
}
</script>

 

調(diào)用組件

// 先把myDlg組件import到頁面中，定義好，然后可以這樣控制組件
this.$invoke('myDlg', 'showDlg')

 

三十、小程序背景圖片的使用問題

小程序中想使用圖片背景一般需要先把圖片轉(zhuǎn)成base64碼，或者使用網(wǎng)絡(luò)網(wǎng)絡(luò)路徑，不能使用本地相對路徑。

 

三十一、支付寶小程序布局樣式編寫優(yōu)先使用less來進行預(yù)處理

支付寶小程序做頁面切圖布局方式還非常原始 - view + css（類似傳統(tǒng)的div+css），沒有像開發(fā)微信小程序那么多框架（如wepy、mpvue等）支持。但幸好社區(qū)出現(xiàn)修改版的wxss-cl工具使得我們可以使用less來進行樣式預(yù)處理。詳細(xì)如下：

https://openclub.alipay.com/read.php?tid=12098&fid=66&ant_source=zsearch

 

三十二、支付寶小程序頁面布局時寫錯標(biāo)簽會出現(xiàn)什么奇葩情況？

比如把標(biāo)簽view寫錯成veiw可能會現(xiàn)現(xiàn)什么異常呢？如果頁面節(jié)點結(jié)構(gòu)復(fù)雜的話開發(fā)者工具的渲染器會卡死，如果節(jié)點簡單的話，可以錯誤的渲染出來；這兩種情況調(diào)試器都不會報錯，要切換到 調(diào)試小程序開發(fā)者工具 (ctr+shift+I )  才可以看到下面這樣的報錯。

 

C:\Program Files\小程序開發(fā)者工具\resources\app\out\volans\workbench\browser\code\index.js:1 [renderer.file][Wed Jan 02 2019 11:35:03 GMT+0800 (中國標(biāo)準(zhǔn)時間)][ERROR]d:\xxx\index.axmlrecognized as binary

 

三十三、使用Wepy編寫的組件，引用時參數(shù)中傳函數(shù)時，函數(shù)中的this指向組件本身

1 2 3

<my-component   :onOk="onMyComponentOk" />

1 2 3 4

onMyComponentOk () {     console.log(this) // 輸出組件對象     console.log(this.$parent) // 輸出當(dāng)前組件的上面的調(diào)用方對象 }

 

三十四、wepy的頁面中mixins定義onShareAppMessage無效問題

作者也表態(tài)了，在一開始的設(shè)計中，mixin就不支持on事件，建議使用類的繼承去實現(xiàn)

 

1 2 3

export MyPage extends wepy.page {}   export Index extends MyPage {}

 

https://github.com/Tencent/wepy/issues/824

 

三十五、wepy中缺少模板過濾器的解決方式

 可以直接使用wxs實現(xiàn)類似功能，或者直接使用頁面上自定義的函數(shù)

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/

 

三十六、微信小程序wx.showToast()與wx.hideLoading()同時調(diào)用的bug

wx.showToast()與wx.hideLoading()同時調(diào)用時，wx.showToast在手機上沒效果，原因應(yīng)該是hideLoading不僅會作用于loading還作用于toast．

解決方案：wx.showToast()與wx.hideLoading()不同時調(diào)用，使用setTimeout延時調(diào)用wx.showToast()

 

三十七、小程序上傳非圖片文件功能比較尷尬

小程序在支持上傳圖片時比較友好，但要傳其他文件時，并沒有提供相關(guān)的支持，目前可想到的方案是拉出web-view來使用h5實現(xiàn)上傳文件的功能，但此方案的缺陷是ios根本選擇不了文件，因此只能支持安卓端。比較雞肋。