广州app开发_深圳app开发_H5软件开发_小程序定制-广东杰里科技
  • 首页
  • 产品+方案
  • 开发+报价
  • 案例
  • 资讯
  • 关于我们
全国热线:400-9020-696
  • 电商类 产品解决方案
  • 基础商城开发
  • 电商+直播
  • 电商+拼团砍价
  • 电商+分销返佣
  • 电商+O2O
  • 农村电商开发
  • 直播类 产品解决方案
  • 1对1/1对多直播
  • 直播+短视频
  • 直播+商城
  • 直播+线上教育课程
  • 直播+泛娱乐社交
  • 直播+企业
  • 社交类 产品解决方案
  • 社交+电商购物商城
  • 社交+IM聊天
  • 社交+语音聊天
  • 社交+视频聊天
  • 社交+知识内容
  • 社交+垂直行业
  • 教育类 产品解决方案
  • 在线直播教育平台
  • 知识付费平台
  • 在线考试系统
  • 题库系统
  • 校园网络教学
  • 在线网校平台
  • 3D类 产品解决方案
  • 3D+电商
  • 3D+产品宣传
  • 3D+DIY设计
  • 3D+AR
  • 3D+展馆
  • 3D+沉浸式购物
  • 定制类 产品解决方案
  • 小程序开发
  • OA系统开发
  • ERP系统开发
  • CRM系统开发
  • 智慧零售
  • 智慧物流
  • 行业趋势
  • 公司动态
  • 专栏话题
  • 运营推广
  • 问答
  • 微信定制开发
  • 系统开发
  • 小程序开发
  • APP开发
  • 小程序运营
  • APP运营
当前位置:首页>资讯>行业趋势>小程序开发实践总结

小程序开发实践总结

来源:作者:发布时间:2021-09-30 11:41:41阅读量:1638
自微信发布小程序以来,各大公司纷纷跟进,都想从微信这个流量池中捞一杯羹。我们公司也不例外,我们的整个前端团队这半年基本上都是在开发小程序。前后还开发了四五个小程序。总是想留点什么,既是记录那些年我们踩过的坑,又希望大家不要再掉坑了。
我们历年来踏过的坑
css样式无法引用本地图片资源,并且只能引用一个在线资源(background-image),对本地图片资源的引用只能使用< image>标签。{{}}无法执行函数方法,{{}}仅支持基本简单操作和ES6扩展运算符。像价格格式化这种常用的处理方式,只能在 js代码中处理,然后再模板中呈现。
this.se tDa ta ({
  price: this.formatPrice(this.data.price)
})
{{}}中的功能不能通过 wxs模块解决。在 vue. js中模拟筛选器的功能就可以实现。
价格:{{tools.fo rma tPri ce (price)}}
//wxs模块
var formatPrice = function (price){
    price = price >> 0;
    return Number(price / 100).toFixed(2);
}
module. exports={
    formatPrice
}
applet并不支持分享链接到你的朋友圈,一般临时的做法是将网页代码保存在你的本地相册中。也有用户自己发朋友圈转发。通过使用 canvas来实现前端,可以减轻服务端的压力。但也存在图像锯齿不清的问题。推荐预览图片和保存到真机的图片尺寸不同。真机上保存的图片以750宽显示。与预览图相比,要大一些,以便保存在手机上的图片更清晰。小型布局采用 rpx单元, UI稿宽度按750出图。UI稿的尺寸可以直接使用。但将不能在某些型号上显示1 rpx。在H5中可以达到1 px效果。iphoneX吸底按钮的适配,您可以通过媒体查询获得wx.ge tS yst emInfo以获取型号。
@media only screen
    and (device-width : 375px)
    and (device-height : 812px)
    and (-webkit-device-pixel-ratio : 3) { }
页 A->页 B,页面 B的动作触发页面 A的数据更新。以两种方法返回更新页面 A的数据(我司采用方案二):在页面 A监听onShow事件,在 onShow事件触发时,不会有脑更新页面数据。跨页通信是通过 EventBus实现的。复合部件的开发、省市区三级选择器的开发、获取微信地址的地址编码与业务采用的省、市区号对不上。网页路径的层次结构,不能超过10层。Gapplet分包载入,微信对于小程序包的大小有以下限制。完整的小程序所有的分包大小不超过8 M,单个的转包/主包大小不得超过2 M
微信小程序框架对比
wepympvueTaro
wepy
wepy被认为是最早发布的小程序开发框架,它提供了 vue. js类的语法风格和特性,并且在目前阶段应该被广泛应用。在我开发的一些小程序中,也全部采用 wepy框架。首先,我要说说为什么当初选择了这个框架。
类Vue. js的语法风格,适合我们团队原来的技术栈对组件化的支持(当时微信官方 API还不支持组件化),支持加载外部 npm包ES6的方式。
在使用 wepy之前, wepy会自己带 bug。幸好开发人员响应及时,基本上可以覆盖大部分场景。
但其中一个最大的缺点是, wepy组件的实现方式。构件使用的是静态编译组件,在编译阶段,组件被编译到页面中,每个组件都是惟一的实例。许多组件共享相同的数据。以及静态编译组件。生成了在页面 A和页面 B引用的组件 A,而在页面 A和页面 B中将代码 copy两份。造成拆分组件并未对软件包的体积进行任何减少。后来微信官方 API支持组件化编程之后,我们逐渐将一些比较核心、体积较大的组件用原始 API重新构建。
mpvue
mpvue和 wepy是由美团团队开发的,它也是为类 vue. js提供开发体验。紧随其后的是 wepy市场份额(ps:最近,我们团队也正在考虑从 wepy转移到 mpvue)。与 wepy相比,该框架的原理更复杂一些, mpvue修改了 Vue. js的 runtime和 compiler实现,提供了更接近 vue. js的开发体验。
Taro
Taro是一个由京东团队开源的基于 React语法规范的多端开发解决方案。自己对雷克特和塔罗都不太了解,就不多说了。特别是查看开发团队的 blog和代码更详细的多端统一开发框架– Taro
查看小程序
希望能从技术的角度谈谈我对微信小程序的理解,我觉得小程序本身就是 Hybrid App的一种技术方案。在我们的 Hybrid App的技术方案设计中,有很多值得学习的地方。理解并学习小程序技术原理也可以更好的优化我们的代码。
渲染层与逻辑层分离
与以前常见的 Hybrid方案相比,小程序使用了双线程模型:小程序的渲染层和逻辑层是分离的,逻辑层通过 JSCore进行解析和执行,而渲染层通过 webview呈现。以前常见的 Hybrid离线包的方案大部分是用 webview来实现页面渲染和 js解析。因此, js的 runtime被隔离,不能在 webview中处理 DOM对象和 BOM对象。Js不能执行与页面渲染相关的任何操作。数据只能通过 setData从 JsCore传递到 webview。
与 webview相比,独立的 JS运行环境对页面的同时呈现和 JS的执行有一些好处:
js不能动态地在页面中插入节点并介入页面的渲染,解决了安全性和控制问题,否则对小程序的上线审核将失去意义。渲染层与逻辑层的分离,减轻了 webview的压力, js的执行和页面渲染可以并行, js执行卡的主页不会呈现 js。一个 JS运行环境可以由多个页面共享,数据很容易共享,整个小程序的生命周期共享同一个上下文,接近于 App的体验。
缺点是:
webview和 JSCore数据传输的大量消耗,数据需要序列化为字符串格式进行传输。
离线包装入
脱线下载, Hybrid App通过 webview载入H5页面,前端页面全部放置在服务器端。当然,还可以灵活变通。但负荷性能对收网速度影响较大。页切换为白屏幕。applet如何加载离线包。一次装入所有前端资源到本地再解压。极大地改善了用户体验。但是微信官方为了防止下载离线包的时间过程,也严格限制了小包的体积。(外接负载情况下外包件大小不能超过2 M,也就是说外接外接的资源不能超过2 M)
多重视图模式
多种 webview的页面结构,而 applet每打开一页,都会呈现一个新的 webview。为避免 webview占用内存。applet限制级别不能超过10层。
预先装入 webview
预先载入 webview,微信会在后台预装多个 wkwebview (ios平台),当用户打开这个小程序时,就可以省去初始化 wkwebview时间。

定制小程序 开发小程序平台 小程序

延伸阅读

  • 01微信小程序的理解
  • 02软件开发报价的计算方法
  • 03模板小程序商城自己注册需要哪些步骤?
  • 04小程序定制开发的4个注意事项!
  • 05在当下时代,定制开发小程序会有哪些优点?

上一篇

小程序商城怎么做

下一篇

在线教育软件开发

相关推荐
  • 模板小程序商城自己注册需要哪些步骤?
  • 微信小程序的理解
  • 软件开发报价的计算方法
  • 在当下时代,定制开发小程序会有哪些优点?
  • 小程序定制开发的4个注意事项!
  • APP开发遇到的各种问题
  • 手机APP软件开发需经历的五大阶段
  • h5开发的好处
  • 杰里告诉您模板小程序和定制开发小程序哪个比较好?
  • 教育APP开发的必要性

开发定制软件

一站式服务平台,为您提供专业的解决方案

*
获取项目评估

TOP榜单

  • 1

    喜报 | 广东杰里科技有限公司荣获国家“高新技术企业”认定

  • 2

    便利店的微信小程序开发需要哪些功能?

  • 3

    广州微信小程序开发有哪些步骤?

  • 4

    小程序定制开发的优点

  • 5

    两天可以搞定微信小程序开发吗?

  • 6

    微信小程序开发和支付宝小程序开发哪个好?

  • 7

    杰里告诉您开发小程序的的一些实践

  • 8

    微信小程序开发怎么做?

  • 9

    外包小程序好不好?价格怎么样?如何找到适合的公司?

  • 10

    开发小程序需要什么技术?

相关栏目

智慧物流软件开发

小程序开发多少钱

软件开发报价

APP制作多少钱

开发一个系统多少钱

金融直播APP开发

定制app

商城开发

电商直播开发

H5开发

O2O模式

社交新零售开发

分销商城系统开发

定制小程序

手机APP开发

广州app开发_深圳app开发_H5软件开发_小程序定制-广东杰里科技

APP、小程序、系统等软件定制开发企业服务商,为您提供专业的解决方案

咨询热线

官方热线:

400-9020-696

廖先生(微信同号)

13533735791

售后热线

杰里科技(400热线)

400-9020-696

联系我们

QQ:519045693 邮箱:lxy@jooneit.com

广州市天河区天河北路侨林街47号2501房

国家高新技术企业编号

GR202244012702

关注公众号

广州app开发_深圳app开发_H5软件开发_小程序定制-广东杰里科技

软件开发从这里开始

友情链接
【微信小程序开发】 【小程序开发】 【微信小程序】 【教育软件开发】
© 杰里科技 粤ICP备20059313号