微信小程序系列 - 随笔分类 - pleaseAnswer

功能⑩ 小程序跨页面通信解决思路 -- event.js

摘要：在小程序里，每个 Page 都是一个模块，有着独立的作用域，因此 Page 间需要有一种通信策略。小程序登录&注册之后会自动切换首页角色+内容展示发布／订阅模式发布／订阅模式由一个发布者、多个订阅者以及一个调度中心所组成。发布 / 订阅模式如何实现解耦？订阅者和发布者并不需要关心对方的状态阅读全文

posted @ 2021-10-18 15:27 pleaseAnswer 阅读(250) 评论(0) 推荐(0)

mpvue

摘要：1 优势 mpvue 提供 vuex 进行数据状态管理，能满足复杂应用状态管理需求，这是其他框架都不具备的 2 新建项目 A Mpvue project # 初始化项目 vue init mpvue/mpvue-quickstart myproject cd myproject # 安装依赖 npm 阅读全文

posted @ 2021-10-15 10:23 pleaseAnswer 阅读(315) 评论(0) 推荐(0)

⑩ 自定义tabbar

摘要：tabBar 为自定义组件：推荐使用 fixed 在底部的 cover-view + cover-image 组件渲染样式，以保证 tabBar 层级相对较高每个 tab 页下的自定义 tabBar 组件实例是不同的，可通过自定义组件下的 getTabBar 接口获取当前页面的自定义 tabBar 阅读全文

posted @ 2021-10-11 17:00 pleaseAnswer 阅读(85) 评论(0) 推荐(0)

⑨ 小程序运行时

摘要：1 运行环境平台逻辑层渲染层 iOS JavaScriptCode WKWebView Android V8 Mobile Chrome 开发工具 NW.js Chromiun WebView PC Chrome Chrome MAC JavaScriptCode WKWebView 1.1 阅读全文

posted @ 2021-10-11 16:57 pleaseAnswer 阅读(156) 评论(0) 推荐(0)

⑧ 小程序基础库的更新迭代

摘要：1 小程序基础库在启动小程序后先载入基础库，接着再载入业务代码。由于小程序的渲染层和逻辑层是两个线程管理渲染层 WebView 层注入的称为 WebView 基础库逻辑层注入的称为 AppService 基础库所有小程序在微信客户端打开的时候都需要注入相同的基础库，所以小程序的基础库不会被阅读全文

posted @ 2021-10-11 14:38 pleaseAnswer 阅读(131) 评论(0) 推荐(0)

⑦ 性能优化

摘要：1 启动 1.1 代码包下载下载到的小程序代码包是编译、压缩、打包之后的代码包 1.2 分包加载流程主包：小程序启动时会马上打开的页面代码和相关资源分包：其余的代码和资源在小程序启动时，只有主包的内容才会被下载 2 页面层级准备小程序启动时仅有一个页面层级在视图层内，小程序的每一个页面都阅读全文

posted @ 2021-10-11 14:35 pleaseAnswer 阅读(43) 评论(0) 推荐(0)

⑥ 底层框架

摘要：1 双线程模型小程序的逻辑层与渲染层分开在不同的线程运行跟传统的 Web 单线程模型有很大的不同 1.1 技术选型要求：快--渲染快、加载快三种渲染界面的技术用纯客户端原生技术来渲染小程序代码需要与微信代码一起编包发布，pass 用纯 Web 技术来渲染性能问题：单线程介于客户端原生阅读全文

posted @ 2021-10-11 14:24 pleaseAnswer 阅读(153) 评论(0) 推荐(0)

⑤ 场景应用

摘要：1 界面常见的交互反馈 1.1 触摸反馈小程序的 view 容器组件和 button 组件提供了 hover-class 属性，触摸时会往该组件加上对应的 class 改变组件的样式。 /*page.wxss */ .hover{ background-color: gray; } <!--pag 阅读全文

posted @ 2021-10-11 13:52 pleaseAnswer 阅读(81) 评论(0) 推荐(0)

④ 小程序宿主环境

摘要：小程序可以调用宿主环境提供的微信客户端的能力 1 渲染层和逻辑层 WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层 1.1 通信模型小程序的渲染层和逻辑层分别由2个线程管理渲染层的界面使用了 WebView 进行渲染逻辑层采用 JsCore 线程运行 JS 脚本一个小程序阅读全文

posted @ 2021-10-11 11:45 pleaseAnswer 阅读(84) 评论(0) 推荐(0)

③ 小程序的代码组成

摘要：1 JSON配置 JSON 用于做静态配置。小程序配置 app.json app.json 是当前小程序的全局配置配置项 pages 字段描述当前小程序所有页面路径配置项 window 字段定义小程序所有页面的顶部背景颜色、文字颜色等 2 WXML模板 WXML 是小程序框架设计的一套标签阅读全文

posted @ 2021-10-11 10:54 pleaseAnswer 阅读(162) 评论(0) 推荐(0)

② 小程序的宿主环境（简概）

摘要：渲染层和逻辑层 1. 小程序的运行环境分成渲染层和逻辑层 WXML模板和WXSS样式工作在渲染层 JS脚本工作在逻辑层 2. 小程序的渲染层和逻辑层分别由 2个线程管理渲染层的界面使用了WebView进行渲染逻辑层采用JsCore线程运行JS脚本一个小程序存在多个界面，所以渲染层存在多阅读全文

posted @ 2021-09-17 15:07 pleaseAnswer 阅读(69) 评论(0) 推荐(0)

① 小程序与普通网页开发的区别

摘要：线程网页开发渲染线程跟脚本线程是互斥的；小程序中二者是分开的，分别运行在不同的线程中。运行环境运行环境逻辑层渲染层 iOS JavaScriptCore WKWebView 安卓 V8 chromiun定制内核小程序开发者工具 NWJS Chrome WebView 网页开发可阅读全文

posted @ 2021-09-17 15:04 pleaseAnswer 阅读(234) 评论(0) 推荐(0)

功能⑨ 小程序使用canvas制作海报并转换为图片保存

摘要：总结文档微信开发文档 -- canvas 组件的绘图上下文 1. 使用wx.getImageInfo()将头像+二维码转临时路径 beforCreateImage() { let that = this wx.getImageInfo({ src: that.data.avatarUrl, su 阅读全文

posted @ 2021-09-08 09:33 pleaseAnswer 阅读(611) 评论(0) 推荐(0)

④ 小程序使用分包

摘要：分包加载对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载主包放置默认启用页面/TabBar页面，以及一些所有分包都需要使用到公共资源、JS脚本分包根据开发者的配置进行划阅读全文

posted @ 2021-04-02 17:17 pleaseAnswer 阅读(218) 评论(0) 推荐(0)

功能⑦ 小程序整合高德地图定位

摘要：1.登录高德地图 https://lbs.amap.com/ 1.1 应用管理 1.2 创建新应用 1.3 添加key 1.4 下载SDK https://lbs.amap.com/api/wx/download 2.微信小程序中 2.1 将下载的sdk存放在项目中 2.2 使用 var amapF 阅读全文

posted @ 2021-04-02 17:16 pleaseAnswer 阅读(1129) 评论(0) 推荐(0)

功能⑥ 小程序服务通知

摘要：tmplIds 需要订阅的消息模板的id的集合，一次调用最多可订阅3条消息消息模板id在[微信公众平台(mp.weixin.qq.com)-功能-订阅消息]中配置。每个tmplId对应的模板标题需要不相同，否则会被过滤。 wx.requestSubscribeMessage({ tmplIds: 阅读全文

posted @ 2021-03-15 10:31 pleaseAnswer 阅读(227) 评论(0) 推荐(0)

功能⑤ 小程序视频上传

摘要：1 视频上传组件 // wxml文件  <view class='upload_warp_img'> <view class='img-preview-con' wx:for='{{videoList}}' wx:key="*this"> <video src='{{ite 阅读全文

posted @ 2021-03-15 10:30 pleaseAnswer 阅读(300) 评论(0) 推荐(0)

功能④ 小程序常用API

摘要：目录文本复制 -- wx.setClipboardData 实现分享到朋友+朋友圈 -- Page.onShareAppMessage+Page.onShareTimeline 人脸识别 -- wx.startFacialRecognitionVerify(OBJECT) 小程序内跳转至其他小程序阅读全文

posted @ 2021-01-26 16:10 pleaseAnswer 阅读(237) 评论(0) 推荐(0)

功能③ 小程序图片上传+预览+删除

摘要：上传组件upLoadImgComponent.wxml  <view class='upload_warp_img'> <view class='img-preview-con' wx:for='{{imgList}}' wx:key="*this"> <image src 阅读全文

posted @ 2021-01-26 15:56 pleaseAnswer 阅读(142) 评论(0) 推荐(0)

功能② 小程序接口入参使用formdata格式

摘要：引进js文件 const FormData = require('./infomation/formData.js') 文件地址 function loanAdd(filePath, params, cb) { var {name, sex, idCard, birthday, location, 阅读全文

posted @ 2021-01-26 15:54 pleaseAnswer 阅读(421) 评论(0) 推荐(0)

随笔分类 - 微信小程序系列