0

0

总结分享一些小程序开发中实用的小知识

青灯夜游

青灯夜游

发布时间:2022-01-26 10:50:10

|

3330人浏览过

|

来源于掘金社区

转载

本篇文章给大家总结分享一些小程序开发中实用的小知识,希望对大家有所帮助!

总结分享一些小程序开发中实用的小知识

了解小程序的渲染原理

背景

在网页开发中,由于js是单线程的,所以有时候会出现长时间运行脚本,导致页面失去响应。 页面渲染目前有以下三种方式:

  • 纯客户端原生技术渲染
  • 纯web技术渲染
  • Hybrid渲染,即web和native渲染相结合的方式

在小程序中,选择了Hybrid的渲染方式,将逻辑层和视图层分开,使用双线程的方式运行,使用webView渲染视图层的界面,逻辑层运行在JSCore中。

小程序的双线程模型:

  • 逻辑层:创建一个单独的线程去执行javascript,在这里执行的都是有关小程序业务逻辑的代码,负责逻辑处理,数据请求,接口调用。
  • 视图层:界面渲染都在webView线程里执行,通过逻辑层代码控制渲染哪些界面
  • jsBridge:使小程序可通过API使用原生的功能

1.png

你真的了解appId,uniId,openId之间的联系么

openID

openID是微信公众平台为用户同一分配的,众所周知,微信小程序和微信公众号都是维护在微信公众平台上的,每个公众号和小程序为了区分用户,为每个用户都生成了唯一的openID

2.png

UnionID

UnionID是微信开放平台给微信用户分配的ID。 在同一个开放平台下的应用,微信用户会有唯一的UnionID

比如:你公司有两个应用,小程序A和微信公众号B,A和B的用户信息需要打通,可以将A和B两个应用绑定到同一个开放平台下,微信开放平台会给微信用户生成一个唯一的UnionID,在授权登录注册后,将UnionID存储在用户表里,以后从同一开放平台下的其他应用授权登录拿到UnionID后,就可以直接返回用户信息,

3.png

AppID

AppID是不同应用的唯一标识

ModelGate
ModelGate

一站式AI模型管理与调用工具

下载

比如:你公司有1个小程序,一个公众号两个应用,AppId就是这两个应用的唯一标识

4.png

带你一起总结小程序的跳转能力,方便随时接受领导检验

今天一朋友跟我吐槽,他现处于一个中小型公司,老板们在会议室开会,大boss有个问题就是关于小程序跳转的。一个不知道负责哪块的领导A出来,先是问了运维,然后又问了后端java大大。java大大说这个属于前端范畴,他们更清楚点,领导A听后直接说了句,前端知道啥,然后走进会议室,跟大boss反馈,没人知道。他之前跟我说他们公司前端地位低,这是真的低啊

h5跳转小程序

产品:小羊,我们这个公众号点击这个按钮需要跳转到某某某小程序上去。这个功能必须实现

好咯需求有了,开始给方案呗

  • 方案一:点击按钮,给个弹框,弹框里放个二维码。引导用户长按识别
    • 操作流程场,用户转化率低,大部分用户基本上就懒得操作了
  • 方案二:使用微信的开放标签wx-open-launch-weapp
    • 可以跳转任意合法合规的小程序(感觉这个功能后面会有更多限制出来)

经过和产品讨论,第二种方案更适合点,开整:

步骤:

  • 已认证的服务号,服务号绑定“js接口安全域名”下的网页可使用此标签跳转任意合法合规小程序
  • 引入js文件 https://res.wx.qq.com/open/js/jweixin-1.6.0.js
  • 通过config接口注入权限配置,并通过openTagList字段申请所需要的开放标签
wx.config({
  debug: false,
  appId: '',   // 公众号唯一标识
  timestamp: '',  // 生成签名的时间戳
  nonceStr: '',   // 生成签名的随机串
  signature: '',  // 签名
  jsApiList: ["wx-open-launch-weapp"],
  openTagList: ["wx-open-launch-weapp"] // 微信开放标签 小程序跳转按钮:<wx-open-launch-weapp>
});
// 通过ready处理成功验证
wx.ready(function () {
  console.log('ready')

})
// 处理失败验证
wx.error(function(error) {
  console.error("err", error);
});

<wx-open-launch-weapp
  id="launch-btn"
  username="gh_xxxxxxxx"
  path="pages/home/index?user=123&action=abc"
>
  <script type="text/wxtag-template">
    <style>.btn { padding: 12px }</style>
    <button class="btn">打开小程序</button>
  </script>
</wx-open-launch-weapp>

微信客服消息中带跳转小程序链接

文本内容....<a href='' data-miniprogram-appid='{{appid}}' data-miniprogram-path='pages/index/index'>点击跳小程序</a>
  • data-miniprogram-appid填写小程序链接,表示跳转小程序
  • data-miniprogram-path 小程序路径,可带参数
  • 公众号必须和小程序相关联
  • 链接中的各个属性值必须使用单引号

小程序跳转小程序

wx.navigateToMiniProgram({
    envVersion: 'release', // 要打开的小程序版本,develop: 开发版,trial:体验版,release:正式版。仅在当前小程序为开发版或体验版时此参数有效。
    appId: ’‘, // 跳转appid
    path: ’‘  //  跳转路径
})
  • 需要用户手动触发
  • 需要用户确认跳转

【相关学习推荐:小程序开发教程

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
硬盘接口类型介绍
硬盘接口类型介绍

硬盘接口类型有IDE、SATA、SCSI、Fibre Channel、USB、eSATA、mSATA、PCIe等等。详细介绍:1、IDE接口是一种并行接口,主要用于连接硬盘和光驱等设备,它主要有两种类型:ATA和ATAPI,IDE接口已经逐渐被SATA接口;2、SATA接口是一种串行接口,相较于IDE接口,它具有更高的传输速度、更低的功耗和更小的体积;3、SCSI接口等等。

1954

2023.10.19

PHP接口编写教程
PHP接口编写教程

本专题整合了PHP接口编写教程,阅读专题下面的文章了解更多详细内容。

658

2025.10.17

php8.4实现接口限流的教程
php8.4实现接口限流的教程

PHP8.4本身不内置限流功能,需借助Redis(令牌桶)或Swoole(漏桶)实现;文件锁因I/O瓶颈、无跨机共享、秒级精度等缺陷不适用高并发场景。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2401

2025.12.29

java接口相关教程
java接口相关教程

本专题整合了java接口相关内容,阅读专题下面的文章了解更多详细内容。

47

2026.01.19

线程和进程的区别
线程和进程的区别

线程和进程的区别:线程是进程的一部分,用于实现并发和并行操作,而线程共享进程的资源,通信更方便快捷,切换开销较小。本专题为大家提供线程和进程区别相关的各种文章、以及下载和课程。

765

2023.08.10

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

531

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

576

2023.07.28

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

760

2023.08.03

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

26

2026.03.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
微信小程序开发之API篇
微信小程序开发之API篇

共15课时 | 1.3万人学习

微信小程序开发--云开发篇
微信小程序开发--云开发篇

共15课时 | 0.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号