小程序開發中實用的小知識有哪些

這篇文章跟大家分析一下“小程序開發中實用的小知識有哪些”。內容詳細易懂，對“小程序開發中實用的小知識有哪些”感興趣的朋友可以跟著小編的思路慢慢深入來閱讀一下，希望閱讀后能夠對大家有所幫助。下面跟著小編一起深入學習“小程序開發中實用的小知識有哪些”的知識吧。

了解小程序的渲染原理

背景

在網頁開發中，由于js是單線程的，所以有時候會出現長時間運行腳本，導致頁面失去響應。 頁面渲染目前有以下三種方式：

• 純客戶端原生技術渲染

• 純web技術渲染

• Hybrid渲染，即web和native渲染相結合的方式

在小程序中，選擇了Hybrid的渲染方式，將邏輯層和視圖層分開，使用雙線程的方式運行，使用webView渲染視圖層的界面，邏輯層運行在JSCore中。

小程序的雙線程模型：

• 邏輯層：創建一個單獨的線程去執行javascript，在這里執行的都是有關小程序業務邏輯的代碼，負責邏輯處理，數據請求，接口調用。

• 視圖層：界面渲染都在webView線程里執行，通過邏輯層代碼控制渲染哪些界面

• jsBridge：使小程序可通過API使用原生的功能

你真的了解appId，uniId，openId之間的聯系么

openID

openID是微信公眾平臺為用戶同一分配的，眾所周知，微信小程序和微信公眾號都是維護在微信公眾平臺上的，每個公眾號和小程序為了區分用戶，為每個用戶都生成了唯一的openID

UnionID

UnionID是微信開放平臺給微信用戶分配的ID。 在同一個開放平臺下的應用，微信用戶會有唯一的UnionID

比如：你公司有兩個應用，小程序A和微信公眾號B，A和B的用戶信息需要打通，可以將A和B兩個應用綁定到同一個開放平臺下，微信開放平臺會給微信用戶生成一個唯一的UnionID，在授權登錄注冊后，將UnionID存儲在用戶表里，以后從同一開放平臺下的其他應用授權登錄拿到UnionID后，就可以直接返回用戶信息，

AppID

AppID是不同應用的唯一標識

比如：你公司有1個小程序，一個公眾號兩個應用，AppId就是這兩個應用的唯一標識

帶你一起總結小程序的跳轉能力，方便隨時接受領導檢驗

今天一朋友跟我吐槽，他現處于一個中小型公司，老板們在會議室開會，大boss有個問題就是關于小程序跳轉的。一個不知道負責哪塊的領導A出來，先是問了運維，然后又問了后端java大大。java大大說這個屬于前端范疇，他們更清楚點，領導A聽后直接說了句，前端知道啥，然后走進會議室，跟大boss反饋，沒人知道。他之前跟我說他們公司前端地位低，這是真的低啊

h6跳轉小程序

產品：小羊，我們這個公眾號點擊這個按鈕需要跳轉到某某某小程序上去。這個功能必須實現

好咯需求有了，開始給方案唄

• 方案一：點擊按鈕，給個彈框，彈框里放個二維碼。引導用戶長按識別

• 操作流程場，用戶轉化率低，大部分用戶基本上就懶得操作了

• 方案二：使用微信的開放標簽wx-open-launch-weapp

• 可以跳轉任意合法合規的小程序（感覺這個功能后面會有更多限制出來）

經過和產品討論，第二種方案更適合點，開整：

步驟：

• 已認證的服務號，服務號綁定“js接口安全域名”下的網頁可使用此標簽跳轉任意合法合規小程序

• 引入js文件 https://res.wx.qq.com/open/js/jweixin-1.6.0.js

• 通過config接口注入權限配置，并通過openTagList字段申請所需要的開放標簽

wx.config({
  debug: false,
  appId: '',   // 公眾號唯一標識
  timestamp: '',  // 生成簽名的時間戳
  nonceStr: '',   // 生成簽名的隨機串
  signature: '',  // 簽名
  jsApiList: ["wx-open-launch-weapp"],
  openTagList: ["wx-open-launch-weapp"] // 微信開放標簽 小程序跳轉按鈕：<wx-open-launch-weapp>
});
// 通過ready處理成功驗證
wx.ready(function () {
  console.log('ready')

})
// 處理失敗驗證
wx.error(function(error) {
  console.error("err", error);
});

<wx-open-launch-weapp
  id="launch-btn"
  username="gh_xxxxxxxx"
  path="pages/home/index?user=123&action=abc"
>
  <script type="text/wxtag-template">
    <style>.btn { padding: 12px }</style>
    <button class="btn">打開小程序</button>
  </script>
</wx-open-launch-weapp>

微信客服消息中帶跳轉小程序鏈接

文本內容....<a href='' data-miniprogram-appid='{{appid}}' data-miniprogram-path='pages/index/index'>點擊跳小程序</a>

• data-miniprogram-appid填寫小程序鏈接，表示跳轉小程序

• data-miniprogram-path 小程序路徑，可帶參數

• 公眾號必須和小程序相關聯

• 鏈接中的各個屬性值必須使用單引號

小程序跳轉小程序

wx.navigateToMiniProgram({
    envVersion: 'release', // 要打開的小程序版本，develop: 開發版，trial：體驗版，release：正式版。僅在當前小程序為開發版或體驗版時此參數有效。
    appId: ’‘, // 跳轉appid
    path: ’‘  //  跳轉路徑
})

• 需要用戶手動觸發

• 需要用戶確認跳轉

關于小程序開發中實用的小知識有哪些就分享到這里啦，希望上述內容能夠讓大家有所提升。如果想要學習更多知識，請大家多多留意小編的更新。謝謝大家關注一下億速云網站！