近在研究小程序開發，看了一些官網文檔，我們今天就來學習一下如何跳轉，順便把跳轉過程中的參數傳遞，以及接收賦值到模板中顯示學習了。

首先我們創建一個小程序，填寫項目名稱，以及路徑，這里AppID我用的測試賬號。

我們進入到開發頁面顯示的默認代碼中Pages目錄中只有index和logs，小程序頁面一般都包裹.js文件主要是邏輯層的一些內容，.json文件主要作用是頁面的獨立配置文件，wxml文件主要是我們直觀顯示的頁面相當于html，wxss文件主要是用于頁面的樣式相當于css，不對贅述詳細可以看官方文檔，這里主要講頁面跳轉以及傳參。

我們首先增加一個新的頁面test，創建的時候，系統會自動在app.json中創建一條路由，還有更簡單的辦法，直接在app.json中添加一條路由，系統就會幫你直接創建相對應的內容，這里要注意的是，如果刪除頁面，路由是不會自動刪除的，需要手動刪除一下，路由也是一樣。

接下來我們改造一下首頁的內容，index文件夾中的index.wxml，增加跳轉，小程序中是沒有a標簽的，跳轉的標簽是<navigator>，這樣就可以正常跳轉到設置好的頁面了。

除了這種類似于a標簽的跳轉，小程序還集成api按鈕跳轉，只需要在button中設置bindtap參數即可，bindtap這個是小程序的事件綁定，寫法<button bindtap="ondemo">api跳轉</button>，同樣是在index.wxml中寫，這里js中事件沒有寫報錯，和回調等。關于跳轉有多種api，根據官方文檔，我們文中使用的是navigateTo會保留當前頁面，跳轉到應用內的某個頁面，另外還有redirectTo是會關閉當前頁面，跳轉到應用內的某個頁面，以及navigateBack關閉當前頁面，返回上一頁面或多級頁面等，具體可以查詢一下官網文檔，或者在文章下方回復。

接下來我們講怎么傳遞參數以及接收參數，傳遞很簡單沒什么可說的，直接上代碼了

接下來我們說一下如何接收傳遞過來的參數，接收過來的數據是放在options中的，我們直接用console.log打印一下。

我們在onLoad中可以直接打印出來了，onLoad會在創建頁面的時候執行，所以跳轉之后會直接打印出來。

接下來我們講怎么把傳遞過來的數據顯示出來，需要對js以及wxml文件進行一定的改造，我先改造一下test.wxml

既然要獲取數據就要在js文件中操作，這里要提到setData， 這個函數用于將數據從邏輯層發送到視圖層（異步），同時改變對應的 this.data 的值（同步），看到網上有說用this.data的，官網文檔特別說明了一下，是不行的，原文在這里：直接修改 this.data 而不調用 this.setData 是無法改變頁面的狀態的，還會造成數據不一致。

最后上一張效果圖：

onLoad(options){ 
 let orderId = options.orderId; 
 // 根據orderId查詢訂單詳情數據 
 wx.request({ 
 url: 'xxxxxx', // 接口地址 
 data: { 
 orderId: orderId 
 }, 
 header: { 
 'content-type': 'application/json' // 默認值 
 }, 
 success(res) { 
 console.log(res.data) 
 } 
 }) 
}

data: { 
 orderId: '' 
}, 
onShow() { 
 // 獲取data里面存的orderId 
 let orderId = this.data.orderId; 
 wx.request({ 
 url: 'xxxxxx', // 接口地址 
 data: { 
 orderId: orderId 
 }, 
 header: { 
 'content-type': 'application/json' // 默認值 
 }, 
 success(res) { 
 console.log(res.data) 
 } 
 }) 
}, 
onLoad(options){ 
 let orderId = options.orderId; 
 // 向data里面set orderId 
 this.setData({ 
 orderId: orderId 
 }) 
}

年來，微信小程序的開發如火如荼。很多移動端應用為了方便大家的使用，都步入了小程序的行列。之前的內容中我們從泛微、用友到百度、阿里服務對接，都為大家做了比較詳細的介紹和分享，那么對于低代碼平臺開發的移動端應用是否可以和小程序集成呢？

這里以微信小程序為例。為大家介紹如何實現用活字格與微信小程序對接。

對于微信小程序的開發，微信官方有自己的一套標準和開發模式。通過低代碼開發平臺開發的移動端H5頁面，如何嵌入微信小程序中，這個在網上有很多的教程，單純的頁面級集成依靠小程序提供的web-view組件就可以實現，但是在實際的開發過程中，第三方在和微信小程序集成時，除了頁面級集成外，還需要集成用戶、數據等等。

微信登錄流程

如何將微信的用戶同步到第三方，小程序授權登錄后自動跳轉第三方頁面，是所有第三方平臺集成微信小程序的問題。具體，以小程序的登錄流程為例：

上圖中，開發者服務器就是第三方的平臺服務，這里以企業級低代碼平臺活字格（下文均以活字格代替）作為第三方的平臺，具體的流程步驟如下：

1. 通過開發微信小程序首頁，點擊按鈕執行授權登錄邏輯（微信小程序自身不支持onLoad方法中直接去獲取用戶授權信息），登錄成功后返回code信息。

2. 匿名調用活字格提供的GetRequestToken服務端命令（可視化邏輯），實現OAuth授權認證，獲取Authorization信息，具有權限的服務端命令在被調用時，必須將Authorization作為Header，否則會請求失敗。

3. 調用活字格提供的Code2Session 服務端命令，在Code2Seesion 服務端命令中，可視化的調用微信的接口服務API，傳遞appid、appsecret、code等參數，獲取微信小程序用戶的openid（當前小程序的統一身份信息）和unionid（微信開放平臺的統一身份信息）。

4. 將微信小程序用戶的openid作為活字格的唯一身份信息，調用活字格提供的AddUserAndLogin服務端命令，在活字格的服務端命令邏輯中，校驗活字格用戶管理中是否存在以微信小程序openid為用戶名的活字格用戶，如果存在，調用GetSSOToken服務端命令，實現單點登錄；如果用戶不存在，執行添加用戶邏輯，再實現單點登錄。

5. GetSSOToken服務端命令會返回帶有token的活字格應用地址。

6. 通過微信小程序的navigateTo方法，跳轉一個新的小程序頁面，在小程序頁面中嵌入web-view，打開GetSSOToken返回的url地址即可。

7. 單點登錄完成后，將當前用戶的openid存入微信小程序的storage中，以便下次訪問時，實現自動登錄。

8. 二次訪問時，獲取微信小程序的storage的openid信息，如果存在，重復第5、6、7步；如果不存在，從1步重新運行即可。

通過上述的流程步驟，活字格集成微信小程序的步驟大家也有了一定的了解，那具體我們該如何做呢？

操作步驟

準備環境

1.微信小程序（AppID，AppSecret）微信公眾平臺

2.云主機+外網備案域名（或者直接使用活字格云）

3.活字格設計器+活字格服務器（可從官網下載）

4.HBuilder X（為了統一小程序開發邏輯，使用uni-app開發微信小程序。）

5.微信開發者工具

環境配置

1.申請微信開放平臺以及微信小程序并配置環境

a)設置中，注冊微信開放平臺賬號并綁定微信小程序（未綁定公眾平臺的小程序無法獲取unionid）

b)開發管理中，獲取開發者ID

c)開發管理中，獲取小程序代碼上傳密鑰（發行小程序時需要上傳）以及將當前機器外網IP上傳至IP白名單（發行小程序時會校驗，可在發布時根據IP報錯進行設置）

d)開發管理中，設置服務器域名以及業務域名，按照微信官方文檔進行校驗

2.活字格配置

打開附件中活字格的工程文件（.fgcc文件），除了應用功能外，活字格工程文件中還提供了2個config數據表和5個服務端命令。

Config配置

MiniWechatConfig：用于存儲微信小程序的AppID和AppSecret，供服務端命令使用

ForguncyConfig：用于存儲活字格OAuth鑒權參數（client_id，client_secret，scope，grant_type），供服務端命令使用。如果您想獲取參數，可以搜索“葡萄城社區”公眾號，私信小助手獲取。

服務端命令配置

GetRequestToken（匿名調用）：活字格鑒權請求，被微信小程序調用，鑒權成功后，更新access_token，token_due_time，token_type至ForguncyConfig表中（access_token有效期內不重復請求），返回Authorization給接口請求方。

Code2SessionID（需鑒權調用）：通過微信小程序登錄用戶code調用微信接口，換取用戶openid和unionid，被微信小程序調用，返回openid和unionid給接口請求方。

AddUserAndLogin（需鑒權調用）：通過微信小程序用戶UserInfo信息，openid和unionid，校驗活字格中用戶是否存在，創建用戶并調用單點登錄邏輯，返回openid和redirectURL（活字格應用已授權URL地址）

GetSSOToken（需鑒權調用）：通過用戶名（openid）和活字格應用URL地址，調用活字格SSO單點登錄接口實現單點登錄（單點登錄密碼從活字格設計器中獲取，教程下方鏈接），返回openid和redirectURL（活字格應用已授權URL地址）

GetMiniWechatConfig（私有服務端命令）：被Code2SessionID服務端命令調用，獲取微信小程序的配置信息。

用戶管理

開發時用戶管理和管理控制臺中的用戶需要手動添加自定義屬性，用于存儲注冊用戶的微信UserInfo信息。

應用發布

使用普通認證進行應用發布（必須是具有外部備案域名的云主機），獲取活字格應用訪問地址。

HBuilderX和微信開發者工具配置

HBuilderX創建微信小程序（可參考uni-app快速上手教程，創建教程相對繁瑣，推薦直接在HBuilderX中打開下載源文件打開即可）。

https://uniapp.dcloud.net.cn/quickstart-hx.html書簽：uni-app官網

選擇默認模板，Vue版本選擇為3即可：

打開uni-app工程文件：

1.修改manifest.json，配置微信小程序AppID。

2.修改微信小程序首頁index.vue，配置自己的活字格應用URL地址，活字格服務器URL地址，以及活字格OAuth鑒權client_id，其他代碼不需要修改，當然，如果對首頁有UI方面的調整，可自行進行代碼編寫。

活字格應用URL地址：http(s)://域名:端口號/應用名

活字格服務器URL地址：http(s)://域名:22345

3.首頁背景圖如果想要調整，可以替換static文件下的background.png（代碼檢查時要求圖片大小不能超過20K，請自行壓縮）。

4.可以在HBuilderX中模擬運行微信小程序，第一次使用需要配置小程序安裝文件夾，如果啟動失敗，請檢查微信開發者工具的設置中是否開啟了服務端口，同時，個人微信賬號需要添加到微信開發者管理中，否則無法使用微信開發者工具調試。

5.調試時因為需要獲取UserInfo信息，請在微信開發者工具詳情中，添加微信小程序AppID

6.發行微信小程序

發行成功后，可以在微信小程序中查看到開發版本，提交審核即可

此時可以通過體驗版在手機端體驗，審核通過后，可以在小程序中搜索訪問。

總結

到這里我們低代碼集成萬物系列暫時告一段落，后續若有更多內容拓展，我們也會第一時間為大家帶來分享。