小程序开发实践总结

从微信发布小程序以来,各大公司纷纷跟进都想从微信这个流量池里捞一杯羹。我司也不例外,我们整个前端团队这半年来基本上都是在开发小程序。前前后后也开发了四五个小程序了。总觉得要留下点什么,既是记录那些年我们踩过的坑,也是希望大家别再掉坑。

那些年我们踩过的坑

  • css样式不能引用本地图片资源,只能引用线上资源(background-image),引用本地图片资源只能用<image>标签。
  • {{}}不能执行函数方法,{{}}只支持基本的简单运算和ES6拓展运算符。如价格格式化这种常用的处理,只能在js代码中处理好然后再模板中渲染。
    this.setData({
     price: this.formatPrice(this.data.price)
    })
  • 可以通过wxs模块解决{{}}中不能执行函数的问题。可以做到模拟vue.js中过滤器的功能。
    <!-- wxml模板 -->
    <wxs src="../../modules/formatPrice.wxs" module="tools" />
    
    <view>价格:{{tools.formatPrice(price)}}</view>
    // wxs模块
    var formatPrice = function (price){
        price = price >> 0;
        return Number(price / 100).toFixed(2);
    }
    
    module.exports = {
        formatPrice
    }
  • 小程序不支持分享链接到朋友圈,暂时的通用做法是生成保存有页面小程序码的图片到本地相册。又用户自行发朋友圈转发。前端可以利用canvas来实现,减轻服务端压力。但是会有图片锯齿不清晰的问题。建议预览图和保存到真机的图片采用不同的尺寸。保存在真机的图片按照750的宽度实现。相比于预览图要大一些,这样保存到手机的图片会清晰很多。
  • 小程序布局采用rpx单位,UI稿按照750的宽度出图。可直接使用UI稿的尺寸。但是在某些机型上1rpx会无法显示。可以用H5的方式实现1px效果。
  • iphoneX吸底按钮的适配,可以用媒体查询获取wx.getSystemInfo获取机型。参考
    @media only screen
        and (device-width : 375px)
        and (device-height : 812px)
        and (-webkit-device-pixel-ratio : 3) { }
  • 页面A -> 页面B,页面B的操作触发了页面A的数据更新。返回更新页面A的数据,通常有两种方式来实现(我司采用了方案二):
    1. 在页面A监听onShow事件,在onShow事件触发时无脑更新页面数据。
    2. 通过EventBus来实现跨页面通信。
  • 复杂组件的开发,省市区三级联动选择器的开发,获取微信地址库的地址的编码和业务采用的省市区编码对不上。
  • 页面路径的层级,最大不能超过10层。
  • 小程序小程序分包加载,微信对小程序包的大小有如下限制。
  • 整个小程序所有分包大小不超过 8M
  • 单个分包/主包大小不能超过 2M

微信小程序主流框架对比

  • wepy
  • mpvue
  • Taro

wepy

wepy应该算是最早发布的小程序开发框架,提供了类vue.js的语法风格和特性,现阶段应该也是应用最广泛的框架吧。我开发的几个小程序也都是采用了wepy这个框架。我先来说说当初为什么选择这个框架的原因吧。

  1. 类Vue.js的语法风格,适合我们团队原有的的技术栈
  2. 支持组件化(当时微信官方的API还不支持组件化)
  3. 支持加载外部npm包
  4. 支持ES6的写法

前期使用wepy的过程中,wepy自带bug。不过好在开发者响应及时,基本上都能覆盖大部分场景。

但是有个最大的坑点就是,wepy组件的实现方式。组件使用的是静态编译组件,即组件是在编译阶段编译进页面的,每个组件都是唯一的一个实例。 多个组件共享同一个数据。并且静态编译组件。导致组件A,在页面A和页面B被引用,会copy两份代码到页面A和页面B内部。导致拆分组件并没有对包的体积有任何减少。后期微信官方API支持组件化编程后,我们逐步把一些比较核心,体积较大的组件用原声API重构了。

mpvue

由美团团队开发,mpvue和wepy一样也是在小程序上提供了类vue.js的开发体验。作为后来者,抢占了很多wepy的市场份额(ps:我们团队近期也在考虑从wepy迁移到mpvue)。这个框架的原理相比wepy要更加复杂一点,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,提供了更加接近于vue.js的开发体验。

Taro

Taro是由京东团队开源的一套遵循 React 语法规范的多端开发解决方案。本身我对React和Taro都不是很了解,就不多解释了。具体可以看开发团队的博客和代码了解更多细节多端统一开发框架 - Taro

我看小程序

我想从技术的角度来谈谈我对微信小程序的理解,我觉得小程序本身是一个非常优秀的Hybrid App的技术方案。有很多值得学的地方,可以应用到我们Hybrid App的技术方案设计中来。了解和学习小程序技术原理也能更好的优化我们的代码。

渲染层和逻辑层分离


相比于之前常见的Hybrid的方案,小程序使用了双线程模型:小程序的渲染层和逻辑层是是分开的,逻辑层通过JSCore来解析和执行,渲染层是通过webview来渲染。之前的常见Hybrid离线包的方案大多使用webview同时实现页面的渲染和js的解析。这样做的的结果就是隔离了js的runtime,在js代码中无法操作webview中的DOM对象和BOM对象。Js无法做任何和页面渲染有关的操作。只能通过setData把数据从JsCore传递到webview。

独立的JS运行环境,相比于webview同时处理页面的渲染和JS的执行带来了一些好处:

  1. js无法动态的在页面插入节点和干预页面的渲染,解决了安全和管控的问题,否则小程序的上线审核就变得毫无意义。
  2. 渲染层和逻辑层的分离,减轻了webview的压力,js的执行和页面的渲染可以并行,不会出现js执行卡主页面渲染的情况。
  3. 多个页面可以共享一个JS运行环境,数据很方便的共享,整个小程序的生命周期共享同一个上下文,接近App的体验。

坏处在于:

  1. 多了很多webview和JSCore数据传输的消耗,数据需要序列化成字符串格式进行传输。

离线包加载

离线包加载,常见的Hybrid App通过webview加载H5页面,前端页面都是放在服务器端。虽说保证了灵活性。但是加载性能收网速影响大。页面切换白屏时间长。小程序离线包的加载方式。一次性加载所有的前端资源到本地再解压。大大提升了用户体验。不过微信官方为了防止下载离线包的时间过程,也严格限制了小程序包的体积。(分包加载情况下子包大小不能超过2M,也就是初次打开加载的资源不能超过2M)

多webview架构

多webview的页面架构,小程序每新开一个页面,都会用一个新的webview来渲染。为了防止webview对内存的消耗。小程序限制层级不能超过10层。

预加载webview

预加载webview,微信会预加载多一个wkwebview(ios平台)放后台,用户打开小程序时省去初始化wkwebview时间。

本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=hikccibkh1j

原文地址:https://www.cnblogs.com/jlfw/p/12702314.html

时间: 2024-10-06 00:22:22

小程序开发实践总结的相关文章

【小程序】微信小程序开发实践

帐号相关流程 注册范围 企业 政府 媒体 其他组织 换句话讲就是不让个人开发者注册. :) 填写企业信息 不能使用和之前的公众号账户相同的邮箱,也就是说小程序是和微信公众号一个层级的. 填写公司机构信息,对公账户信息 绑定管理员微信 企业认证 公司对公账户对微信进行打款 账户自动验证后,自动认证通过,并将认证资金退回公司对公账户,费用在1元内随机 小程序发布流程 开发实践 这次的demo项目为农历和公历的转换器,重在体验开发流程. AppID(小程序ID) 做上面的那些步骤就是为了得到小程序ID

微信小程序开发入门与实践

基础知识---- MINA 框架 为方便微信小程序开发,微信为小程序提供了 MINA 框架,这套框架集成了大量的原生组件以及 API.通过这套框架,我们可以方便快捷的完成相关的小程序开发工作. MINA 框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,因此我们主要聚焦于数据与逻辑上. 响应的数据绑定 框架的核心是一个响应的数据绑定系统. 整个系统分为两块:视图层(View)和逻辑层(App Ser

微信小程序开发:学习笔记[1]——Hello World

微信小程序开发:学习笔记[1]--Hello World 快速开始 1.前往微信公众平台下载微信开发者工具. 地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 2.打开微信开发者工具,并新建项目 打开微信开发者工具,选择新建小程序项目,我们先不需理解AppID的概念,新建项目时选择无AppID,并取消勾选"建立普通快速启动模板"的选项. 3.在根目录添加代码 1.在根目录创建app.json文件 2.

施德来:有赞电商小程序的实践

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 施德来,毕业于浙江大学计算机学院.曾任职于淘宝.网易,现任有赞前端技术负责人.电商小程序技术负责人. 因为有赞刚好在移动电商这个赛道上,整个行业都推动着我们向前走.海量的商家有各自的需求,不断地在业务上督促我们做一些事.这次我代表团队为大家汇报一下我们被商家推动着做了哪些事,主要是关于技术方面的. 我眼中的小程序 首先和大家分享一下我眼中的小程序到底是什么?关于小程序,有两大矛盾困扰着所有的移动开发者.一个是H5跨平台的开发速度很快,但

小程序+巧应用-微信小程序开发实战pdf

下载地址:网盘下载 系统全面地讲解微信小程序的开发技术.开篇创建一个小程序项目并解析体验,介绍如何由零开始创建一个小程序,全面体验小程序的开发工具.界面.开发框架.实现过程及其主要代码框架,了解小程序的应用场景及开发要求.接着介绍小程序开发基础,包括小程序开发的语言与语法.函数方法.模块.事件交互等.然后详细介绍了组件的应用与开发,包括开发过程与组件应用技巧,还详细分析了API接口,包括使用各个微信原生API接口进行小程序开发的技巧.最后介绍了几个小程序实战案例,让读者实践小程序各项能力的应用及

mpvue体验微信小程序开发

微信小程序 https://developers.weixin.qq.com/miniprogram/introduction/index.html?t=18082114 微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验. 概览 为了帮助开发者简单和高效地开发和调试微信小程序,我们在原有的公众号网页调试工具的基础上,推出了全新的 微信开发者工具,集成了公众号网页调试和小程序调试两种开发模式. 使用公众号网页调试,开发者可以调试微信网页授权和微信

云开发初探 —— 更简便的小程序开发模式

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由李成熙heyli发表于云+社区专栏 李成熙,腾讯云高级工程师.2014年度毕业加入腾讯AlloyTeam,先后负责过QQ群.花样直播.腾讯文档等项目.2018年加入腾讯云云开发团队.专注于性能优化.工程化和小程序服务. 小程序诞生以来,业界关注小程序前端的技术演进较多,因此众多小程序前端的框架.工具也应运而生,前端开发效率大大提高,而后台的开发技术则关注不多,痛点不少,具体痛在哪里呢? 小程序后台开发之痛 第一个是脑袋瓜疼,怎么疼

小程序&#183;巧应用,微信小程序开发实战

系统全面地讲解微信小程序的开发技术.开篇创建一个小程序项目并解析体验,介绍如何由零开始创建一个小程序,全面体验小程序的开发工具.界面.开发框架.实现过程及其主要代码框架,了解小程序的应用场景及开发要求.接着介绍小程序开发基础,包括小程序开发的语言与语法.函数方法.模块.事件交互等.然后详细介绍了组件的应用与开发,包括开发过程与组件应用技巧,还详细分析了API接口,包括使用各个微信原生API接口进行小程序开发的技巧.最后介绍了几个小程序实战案例,让读者实践小程序各项能力的应用及掌握一些应用技巧.本

微信小程序开发基础(一)「配置」与「逻辑层」

微信小程序作为微信生态重要的一环,在实际生活.工作.商业中的应用越来越广泛.想学习微信小程序开发的朋友也越来越多,本文将在小程序框架的基础上就微信小程序项目开发所必需的基础知识及语法特点进行了详细总结和阐述,包括配置.函数.语法.事件及其处理.数据绑定.模块.样式等.想开发小程序,这些内容是必须掌握的. 全文知识结构预览: 一.程序配置: 1.全局配置:2.页面配置 二.逻辑层: 1.程序注册:App()方法:2.页面注册:Page()方法:3.模块与调用:4.微信原生API 三.视图层(将在单