微信小程序开发9-宿主环境(2)

本文介绍了小程序的基本组成部分,包括组件、API和事件的概念。组件是小程序页面的构建单元,API提供了丰富的功能,如网络请求和设备访问,事件则允许程序与用户交互。

1.一个小程序页面可以分解成多个部分组成,组件就是小程序页面的基本组成单元。为了让开发者可以快速进行开发,小程序的宿主环境提供了一系列基础组件。
组件是在WXML模板文件声明中使用的,WXML的语法和HTML语法相似,小程序使用标签名来引用一个组件,通常包含开始标签和结束标签,该标签的属性用来描述该组件。

<!--page.wxml-->

<image mode="scaleToFill" src="img.png"></image>

2.宿主环境提供了丰富的API,可以很方便调起微信提供的能力。几乎所有小程序的API都挂载在wx对象底下(除了Page/App等特殊的构造器),小程序提供的API按照功能主要分为几大类:网络、媒体、文件、数据缓存、位置、设备、界面、界面节点信息还有一些特殊的开放接口

3.API一般调用的约定:

  1. wx.on* 开头的 API 是监听某个事件发生的API接口,接受一个 Callback 函数作为参数。当该事件触发时,会调用 Callback 函数。
  2. 如未特殊约定,多数 API 接口为异步接口 ,都接受一个Object作为参数。
  3. API的Object参数一般由success、fail、complete三个回调来接收接口调用结果,示例代码如代码清单3-17所示,详细说明如表3-9所示。
  4. wx.get* 开头的API是获取宿主环境数据的接口。
  5. wx.set* 开头的API是写入数据到宿主环境的接口。

 

参数名字类型必填描述
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

 

4.事件

UI界面的程序需要和用户互动,例如用户可能会点击你界面上某个按钮,又或者长按某个区域,这类反馈应该通知给开发者的逻辑层,需要将对应的处理状态呈现给用户。
有些时候程序上的“行为反馈”不一定是用户主动触发的,例如我们在视频video播放的过程中,播放进度是会一直变化的,这种反馈也应该通知给开发者做相应的逻辑处理。

5.其他不再仔细研究

 

转载于:https://www.cnblogs.com/RichardWG/p/9465267.html

### 实现微信小程序 `web-view` 组件打开其他小程序的方法 #### 使用场景说明 在微信小程序中,`<web-view>` 组件主要用于加载并展示外部网页内容。然而,在某些特定情况下,可能需要从 `<web-view>` 中触发跳转到另一个小程序的功能[^3]。 #### 技术限制与注意事项 需要注意的是,直接通过 `<web-view>` 组件内的 H5 页面跳转至其他小程序存在一定的技术限制。具体来说,由于安全机制的原因,H5页面内无法直接调用微信小程序的API来完成这一操作。因此,通常的做法是在H5页面上引导用户点击链接或按钮,该动作会通知宿主的小程序,再由小程序执行实际的小程序间跳转逻辑[^2]。 #### 解决方案概述 为了实现在 `<web-view>` 内部启动其他小程序的目标,可以采用如下策略: 1. **建立通信桥梁**:利用 JavaScript 的 `window.postMessage()` 方法让 H5 页面向承载它的微信小程序发送消息; 2. **监听消息事件**:在小程序端注册相应的消息处理函数,当接收到指定的消息时,则调用 wx.navigateToMiniProgram API 进行跨应用导航; #### 示例代码片段 ##### HTML (位于 web-view 加载的 H5 页面) ```html <button id="openOtherApp">前往其他小程序</button> <script type="text/javascript"> document.getElementById(&#39;openOtherApp&#39;).addEventListener(&#39;click&#39;, function() { window.postMessage({ action: &#39;navigateToMiniProgram&#39;, appId: &#39;目标小程序ID&#39; }, &#39;*&#39;); }); </script> ``` ##### 小程序端 JS 文件 ```javascript Page({ onLoad: function () { const that = this; // 创建 Webview 上下文对象 let webViewContext = wx.createWebViewContext(&#39;webViewId&#39;); // 监听来自 WebView 的消息 webViewContext.onMessage(function(res){ if (res.data.action === "navigateToMiniProgram") { wx.navigateToMiniProgram({ appId: res.data.appId, path: &#39;&#39;, // 可选参数, 如果有则填写对应路径 extraData: {},// 需要传递给目标小程序的数据 envVersion: &#39;release&#39;,// release 正式版 develop 开发版 trial 体验版 默认正式版 success(res) { console.log("成功跳转", res); }, fail(err){console.error("跳转失败", err);} }); } }) } }) ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值