微信小程序开发8-小程序的宿主环境(1)

本文深入探讨了小程序的双线程架构,包括渲染层与逻辑层的职责划分,以及它们之间的通信模型。详细介绍了小程序的生命周期,从启动到前后台切换的过程,并解释了如何通过Page()构造器注册页面及管理页面的生命周期。

1.小程序的运行环境分成渲染层和逻辑层,第2章提到过 WXML 模板和 WXSS 样式工作在渲染层,JS 脚本工作在逻辑层。小程序的渲染层和逻辑层分离是经过很多考虑得出来的模型

2.

       1.渲染层和数据相关。
       2.逻辑层负责产生、处理数据。
       3.逻辑层通过 Page 实例的 setData 方法传递数据到渲染层。

3.通信模型:小程序的渲染层和逻辑层分别由2个线程管理:渲染层的界面使用了WebView 进行渲染;逻辑层采用JsCore线程运行JS脚本。

这两个线程的通信会经由微信客户端(下文中也会采用Native来代指微信客户端)做中转,逻辑层发送网络(向服务器发送数据请求)请求也经由Native转发

4.在开发UI界面过程中,程序需要维护很多变量状态,同时要操作对应的UI元素。随着界面越来越复杂,我们需要维护很多变量状态,同时要处理很多界面上的交互事件,整个程序变得越来越复杂。通常界面视图和变量状态是相关联的,如果有某种“方法”可以让状态和视图绑定在一起(状态变更时,视图也能自动变更),那我们就可以省去手动修改视图的工作。
这个方法就是“数据驱动”

5.Dom树:不理解

6.程序构造器App()

宿主环境提供了 App() 构造器用来注册一个程序App,需要留意的是App() 构造器必须写在项目根目录的app.js里,App实例是单例对象,在其他JS脚本中可以使用宿主环境提供的 getApp() 来获取程序实例。

7.生命周期:初次进入小程序的时候,微信客户端初始化好宿主环境,同时从网络下载或者从本地缓存中拿到小程序的代码包,把它注入到宿主环境,初始化完毕后,微信客户端就会给App实例派发onLaunch事件,App构造器参数所定义的onLaunch方法会被调用。
进入小程序之后,用户可以点击左上角的关闭,或者按手机设备的Home键离开小程序,此时小程序并没有被直接销毁,我们把这种情况称为“小程序进入后台状态”,App构造器参数所定义的onHide方法会被调用。
当再次回到微信或者再次打开小程序时,微信客户端会把“后台”的小程序唤醒,我们把这种情况称为“小程序进入前台状态”,App构造器参数所定义的onShow方法会被调用。
我们可以看到,App的生命周期是由微信客户端根据用户操作主动触发的。为了避免程序上的混乱,我们不应该从其他代码里主动调用App实例的生命周期函数。

8.打开途径:从群聊会话里打开,从小程序列表中打开,通过微信扫一扫二维码打开,从另外一个小程序打开当前小程序等,针对不同途径的打开方式,小程序有时需要做不同的业务处理,所以微信客户端会把打开方式带给onLaunch和onShow的调用参数options

9.一个页面是分三部分组成:界面、配置和逻辑。界面由WXML文件和WXSS文件来负责描述,配置由JSON文件进行描述,页面逻辑则是由JS脚本文件负责。一个页面的文件需要放置在同一个目录下,其中WXML文件和JS文件是必须存在的,JSON和WXSS文件是可选的。

10.宿主环境提供了 Page() 构造器用来注册一个小程序页面,Page()在页面脚本page.js中调用,Page() 的调用方式如代码清单3-8所示。Page构造器接受一个Object参数,参数说明如表3-4所示

参数属性类型描述
dataObject页面的初始数据
onLoadFunction生命周期函数--监听页面加载,触发时机早于onShow和onReady
onReadyFunction生命周期函数--监听页面初次渲染完成
onShowFunction生命周期函数--监听页面显示,触发事件早于onReady
onHideFunction生命周期函数--监听页面隐藏
onUnloadFunction生命周期函数--监听页面卸载
onPullDownRefreshFunction页面相关事件处理函数--监听用户下拉动作
onReachBottomFunction页面上拉触底事件的处理函数
onShareAppMessageFunction用户点击右上角转发
onPageScrollFunction页面滚动触发事件的处理函数
其他Any可以添加任意的函数或数据,在Page实例的其他函数中用 this 可以访问

转载于:https://www.cnblogs.com/RichardWG/p/9465056.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('openOtherApp').addEventListener('click', function() { window.postMessage({ action: 'navigateToMiniProgram', appId: '目标小程序ID' }, '*'); }); </script> ``` ##### 小程序端 JS 文件 ```javascript Page({ onLoad: function () { const that = this; // 创建 Webview 上下文对象 let webViewContext = wx.createWebViewContext('webViewId'); // 监听来自 WebView 的消息 webViewContext.onMessage(function(res){ if (res.data.action === "navigateToMiniProgram") { wx.navigateToMiniProgram({ appId: res.data.appId, path: '', // 可选参数, 如果有则填写对应路径 extraData: {},// 需要传递给目标小程序的数据 envVersion: 'release',// 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、付费专栏及课程。

余额充值