近在研究小程序开发，看了一些官网文档，我们今天就来学习一下如何跳转，顺便把跳转过程中的参数传递，以及接收赋值到模板中显示学习了。

首先我们创建一个小程序，填写项目名称，以及路径，这里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.发行微信小程序

发行成功后，可以在微信小程序中查看到开发版本，提交审核即可

此时可以通过体验版在手机端体验，审核通过后，可以在小程序中搜索访问。

总结

到这里我们低代码集成万物系列暂时告一段落，后续若有更多内容拓展，我们也会第一时间为大家带来分享。