鸿蒙 uni 小程序 sdk 小功能 - 打开小程序指定页面

本文对应Uniapp官网： nativesupport.dcloud.net.cn/UniMPDocs/A...

在开发小程序的时候，一个非常常用的功能就是打开小程序的指定页面，打开指定页面，可以更好的向用户展示信息，从而不需要用户自己手动点击去跳转。

下面将通过一个示例来展示 uni小程序sdk 如何打开指定的页面

1. 效果展示

2. 前期准备

使用 uni小程序sdk ，可以让你的应用像微信一样，可以打开一个一个的小程序，这些小程序的存在形式是以 wgt 格式的文件存在，打开一个小程序，就意味着需要加载一个 wgt 包。那么首先我们先来制作一个 wgt 包吧！

示例代码

接下来的功能，你可以自己动手制作，可以直接下载源代码

示例代码见：github.com/GRCmade/uni...

uniapp 项目

新建一个普通的uniapp项目，在这个项目中，新建几个页面，用于测试：

pages/index/index
pages/second/second
pages/third/third

添加这几个页面之后，就可以在 HbuilderX 中，构建 wgt 包了，需要做的就是:

在HbuilderX 的菜单栏中，点击 App-制作应用wgt包

选择 Harmony 选项，点击确认即可

在等待一段时间之后，就可以得到wgt包了

有了这个 wgt 包之后，就可以在 HarmonyOs 原生工程中，打开以uniapp写的小程序了。

HarmonyOs 项目

打开 Deveco Studio , 新建一个普通的鸿蒙工程即可在项目的根目录下，有一个 oh-package.json, 在这里添加 uni小程序的依赖：@dcloudio/uni-app-runtime

json 复制代码

{  
  "modelVersion": "5.0.0",  
  "description": "Please describe the basic information.",  
  "dependencies": {  
    "@dcloudio/uni-app-runtime":"2.3.24"  
  },  
  "devDependencies": {  
    "@ohos/hypium": "1.0.19",  
    "@ohos/hamock": "1.0.0"  
  }  
}

点击sync即可

将上一步的wgt包放到 src/main/resources/resfile/__UNI__F0B54C3.wgt

好了，这样你就完成了前置工作了，现在让我们来看一下代码该如何写

3. 代码解释

首先，需要打开刚才新建好的鸿蒙工程，在鸿蒙工程中 entry/src/main/ets/pages/Index.ets 中，添加如下的代码：

mpId 就是上一步中，获取的 wgt包的名称

ts 复制代码

import { openUniMP, isExistsUniMP, releaseWgtToRunPath } from '@dcloudio/uni-app-runtime';  
  
interface MPres {  
  msg: string;  
}  
  
@Preview  
@Entry  
@Component  
struct Index {  
  @State mpId: string = '__UNI__F0B54C3';  
  @State pageList: string[] = ['pages/index/index', 'pages/second/second', 'pages/third/third']  
  
  async aboutToAppear() {  
    const mpId = this.mpId  
    await new Promise<void>((resolve, reject) => {  
      try {  
        // 判断应用是否已释放到运行目录  
        let isExists = isExistsUniMP(mpId)  
        console.log("isExists:" + isExists)  
        // 拼接wgt包路径  
        let path = getContext().resourceDir + "/" + mpId + ".wgt"  
        // 释放 wgt 包到运行目录  
        releaseWgtToRunPath(mpId, path, (code: number, data: object) => {  
          console.log(JSON.stringify({ code, data }))  
          resolve()  
        })  
      } catch (err) {  
        reject(err)  
      }  
    })  
  }  
  
  build() {  
    Column() {  
      Text('鸿蒙 uni小程序sdk小功能 - 打开小程序指定页面')  
        .fontSize(30)  
      Text('下方三个按钮是打开同一个小程序的三个页面')  
        .margin({ top: 20 })  
      ForEach(this.pageList, (item: string, index: number) => {  
        Button(item)  
          .fontSize(30)  
          .margin({ top: 20 })  
          .onClick(async () => {  
            // 启动小程序  
            const mp = openUniMP(this.mpId, {  
              redirectPath: item  
            })  
            mp.on('show', () => {  
              console.log('UniMP-show:', item)  
            })  
          })  
      })  
      Text('下方按钮打开小程序并且传入参数')  
        .margin({ top: 20 })  
      Button('传入参数')  
        .fontSize(30)  
        .margin({ top: 20 })  
        .onClick(async () => {  
          // 启动小程序  
          const mp = openUniMP(this.mpId, {  
            redirectPath: 'pages/index/index',  
            extraData:{  
              data : 'data from harmonyos'  
            }  
          })  
          mp.on('show', () => {  
            console.log('UniMP-show:', 'pages/index/index')  
          })  
        })  
    }.margin(20)  
  }  
}

aboutToAppear中，执行预加载相关的逻辑
通过 isExistsUniMP 来判断当前目录是否已经存在了解压的wgt
如果没有的话，就调用 releaseWgtToRunPath 把上一步中构建的 wgt 包解压。releaseWgtToRunPath ，中需要传入 appID ，wgtPath和callback

ts 复制代码

type ReleaseWgtToRunPathCallback = (code: 1 | -1, error?: Error) => void
function releaseWgtToRunPath(appID: string, wgtPath: string, callback: ReleaseWgtToRunPathCallback)

在这之后，就可以通过按钮或者其它方式，触发 openUniMP

ts 复制代码

function openUniMP(appID: string, config?: IOpenUniMPConfig): IUniMP

interface IOpenUniMPConfig {
  showCapsuleButton?: boolean
  capsuleMenuActionSheetItems?: ICapsuleMenuActionSheetItem[]
  capsuleButtonStyle?: ICapsuleStyle
  redirectPath?: string
  extraData?: Object 
}

openUniMP中，需要传入appId 和 config , 在本实例中，主要演示的是打开小程序的指定页面，这就需要在 config 中，传入 redirectPath

ts 复制代码

const mp = openUniMP(this.mpId, {  
  redirectPath: item  
})

在开发中，打开小程序指定页面的时候，还有一个非常常用的操作是：打开页面的同时，传入参数传入参数的方式有：
- 路径中传递参数
- config 中的 extraData 传递参数

ts 复制代码

const mp = openUniMP(this.mpId, {  
  redirectPath: 'pages/index/index?data=666',  
  extraData:{  
    data : 'data from harmonyos'  
  }  
})

在小程序上，接收上一步中传入的extraData,可以使用uni.getLaunchOptionsSync,通过这个方法，就可以获取上一步中，传入的extraData

vue 复制代码

onLoad() {
	const launchOptions = uni.getLaunchOptionsSync()
	if(launchOptions){
		console.log("接收到参数:",JSON.stringify(launchOptions))
		this.data = launchOptions
	}
},

接收到的参数是这样的

json 复制代码

{
	"path": "pages/index/index",
	"query": {
		"data": "666"
	},
	"scene": 1001,
	"referrerInfo": {
		"extraData": {
			"data": "data from harmonyos"
		}
	},
	"channel": "",
	"launcher": "default"
}

路径中的参数，会在 query中显示
extraData 会在 referrerInfo 中限制