深入学习小程序框架底层原理,培养双线程思维(2023版,15章)

吉太
• 阅读 182

教程地址1:https://pan.baidu.com/s/1lj7N67dpdCdW6IIafZWDuQ 提取码:7964 教程地址2:https://pan.baidu.com/s/1SChn_JCGf03sybLfyAnkCA 提取码:c862

小程序上线以来,一直被称为便携版的 APP,关于两者之间的区别,无外乎是小程序相对轻便、开发成本低、开发周期短、收效快。 小程序并非凭空冒出来的一个概念,当微信中的 WebView 逐渐成为移动 Web 的一个重要入口时,微信就有相关的 JS API 了。 微信小程序是双线程架构,分为逻辑层和渲染层,在进行文件解析的时候不会发生阻塞。 逻辑层: (1)解析js,负责逻辑处理、事件逻辑、动态数据的处理 (2)小程序的所有代码逻辑都包含在同一个逻辑线程(逻辑层是单线程),小程序只有一个APP实例,但是有多个page,小程序编译之后将会把所有page打包至同一个js文件

与h5页面的区别 运行环境:小程序基于微信系统,而 h5 的宿主环境是浏览器。所以小程序中没有 DOM 和 BOM 的相关 API , jQuery 和一些 NPM 包都不能在小程序中使用; 系统权限:小程序能获得更多的系统权限,如网络通信状态、数据缓存能力等; 渲染机制:小程序的逻辑层和渲染层是分开的,而 h5 页面 UI 渲染跟 JavaScript 的脚本执行都在一个单线程中,互斥。所以 h5 页面中长时间的脚本运行可能会导致页面失去响应 // i18n.ts import { createI18n } from 'vue-i18n' import zh from './zh'

const i18n = createI18n({ locale: 'zh', messages: { zh } }) export default i18n 使用 vue-i18n 提供的 useI18n 方法获取国际化语言实例,并且通过实例上的 t函数来处理需要国际化的字段,使用方式为t('xxx'),代码片段如下: // views/home/index.vue

在创建完这个 indexedDB中的一个打开数据库的 public方法之后,我们迫不及待的在 home.vue中尝试一下。首先使用 new关键字实例化一个对象,通过对象来调用其上面的方法 openStore()来新建数据库并连接数据库。代码块如下: updateItem(storeName: string, data: any) { console.log(this.db) const store = this.db.transaction([storeName], 'readwrite').objectStore(storeName) const request = store.put({ ...data, updateTIme: new Date().getTime() }) request.onsuccess = (event: any) => { console.log('数据写入成功') console.log(event) } request.onerror = (event: any) => { console.log('数据写入失败') console.log(event) } } 在第一步中,首先使用 Typescript的 interface为 store中的所有 state声明类型,然后将 interface放置在InjectionKeyd的泛型类型中,代码片段如下: // src/store/index.ts

import { createStore, Store, useStore as baseUseStore } from 'vuex' import { InjectionKey } from 'vue'

// ...

// 重新封装useStore export function useStore() { return baseUseStore(key) }

// ... 和使用 createApp 创建的、只能在客户端运行的 Vue应用不同,创建一个服务端渲染应用需要使用 createSSRApp,另外为了避免单例模式,为每个用户创建一个干净的、无污染的应用程序,我们需要封装一个工厂函数 createApp,代码片段如下: // client-entry.ts import { createApp } from './main'

const { app, router } = createApp() router.isReady().then(() => { app.mount('#app') })

// server.js if (!isProd) { // 1. 读取 index.html template = fs.readFileSync( path.resolve(__dirname, 'index.html'), 'utf-8' )

// 2. 应用 Vite HTML 转换。这将会注入 Vite HMR 客户端, // 同时也会从 Vite 插件应用 HTML 转换。 // 例如:@vitejs/plugin-react-refresh 中的 global preambles template = await vite.transformIndexHtml(url, template)

// 3. 加载服务器入口。vite.ssrLoadModule 将自动转换 // 你的 ESM 源码使之可以在 Node.js 中运行!无需打包 // 并提供类似 HMR 的根据情况随时失效。 render = (await vite.ssrLoadModule('/src/entry-server.ts')).render } else { // 1. 读取 index.html template = fs.readFileSync( path.resolve(__dirname, 'dist/client/index.html'), 'utf-8' ) 小程序的渲染层和逻辑层分别由两个线程管理:渲染层的界面使用 WebView 进行渲染;逻辑层采用 JSCore 运行 JavaScript 代码。一个小程序存在多个界面,所以渲染层存在多个 WebView。这两个线程间的通信经由小程序 Native 侧中转,逻辑层发送网络请求也经由 Native 侧转发 // zh.ts export default { header: { // 头部组件 orders: '房源订单中心', records: '历史足迹', language: '语言' }, footer: { // 底部组件 airbnb: '爱彼迎', careers: '工作机会', news: '爱彼迎新闻', topic: '政策', diversity: '多元化与归属感', accessibility: '无障碍设施', discovery: '发现', trustAndSafe: '信任与安全', invite: '邀请好友', evection: '商务差旅', magzine: '爱彼迎杂志', airbnborg: 'Airbnb.org', rent: '出租', whyRent: '为什么要出租?', hospitality: '待客之道', responsibleHosting: '房东义务', experiences: '开展体验', resources: '资源中心', service: '客服支持', help: '帮助', neighbors: '邻里支持' } }

点赞
收藏
评论区
推荐文章
赵颜 赵颜
5个月前
[16章]SpringBoot2 仿B站高性能前端+后端项目(2023新版)
资料地址1:https://pan.baidu.com/s/1cxQDKIi7iu1mGmjRr9a0Mw提取码:tz5s资料地址2:https://pan.baidu.com/s/1DjmuC6Id4oUCNVbxfgcMg提取码:qtf3今天给大家讲讲
赵颜 赵颜
5个月前
[15章]深入学习小程序框架底层原理,培养双线程思维
学习地址1:https://pan.baidu.com/s/1ridzu0mrj1vrfT07fdReuw提取码:3zd2学习地址2:https://pan.baidu.com/s/1SChnJCGf03sybLfyAnkCA提取码:c862前端高手特训从
荀勗 荀勗
5个月前
[15章]深入学习小程序框架底层原理,培养双线程思维
资料地址1:https://pan.baidu.com/s/1enXgRjk9LndH6X1t2vyOzQ提取码:id17资料地址2:https://pan.baidu.com/s/1SChnJCGf03sybLfyAnkCA提取码:c862前端高手特训从
赵嬷嬷 赵嬷嬷
4个月前
[16章]慕课甄选-2024年Flutter零基础极速入门到进阶实战
学习地址1:https://pan.baidu.com/s/1iOH2xMvdMyBAJla5PeHuUg提取码:hjhi学习地址2:https://pan.baidu.com/s/1Iwj10AL7jdum19WQz1jdA提取码:0n8xFlutter
鲍二家的 鲍二家的
2个月前
[完结16章]深入学习小程序框架底层原理,培养双线程思维
学习地址1:https://pan.baidu.com/s/1vPkKOYl1stfhAlu8UCdA提取码:xty2学习地址2:https://share.weiyun.com/a7zmLRVg密码:t4jrfm深入学习小程序框架底层原理,培养双线程思维
鲍二家的 鲍二家的
2个月前
AI Agent智能应用从0到1定制开发(12章)
学习地址1:https://pan.baidu.com/s/1ccnoXsPCUg4eP5rSrD0UA提取码:o0mu学习地址2:https://pan.baidu.com/s/1JYJ6dMkwgx0XWQnCM6Q0A提取码:2m68AIAgent已
双寿 双寿
2个月前
[12章]AI Agent智能应用从0到1定制开发
学习地址1:https://pan.baidu.com/s/15IbktHy54IdZRg3g7PWWKQ提取码:v7lt学习地址2:https://pan.baidu.com/s/1JYJ6dMkwgx0XWQnCM6Q0A提取码:2m68AIAgent
吉太 吉太
2个月前
AI Agent智能应用从0到1定制开发[12章]
下载地址1:https://pan.baidu.com/s/15IbktHy54IdZRg3g7PWWKQ提取码:v7lt下载地址2:https://pan.baidu.com/s/1itYcy6EHYLRZSvj2D5e00A提取码:9jdp一、那为啥最
鲍二家的 鲍二家的
1个月前
[7章]Go从入门到进阶,大厂案例全流程实践
学习地址1:https://pan.baidu.com/s/1kZq7Rc7PHBRYEzWL85FCA提取码:0udi学习地址2:https://pan.baidu.com/s/1Rr5G2U3YSbwhFTLMHH2keA提取码:j0viGo语言高效、
鲍二家的 鲍二家的
1个月前
前端跳槽突围课:React18底层源码深入剖析
学习地址1:https://pan.baidu.com/s/1DnzdWB9oCEMGOx9jvYjAjg提取码:hqw0学习地址2:https://pan.baidu.com/s/1kUlrpqlboZIrRmXpiT9TLw提取码:ur5i在当下就业环