欢迎来到258分享网,纯净的网络源码分享基地!

258资源分享网

全部作品
全部作品
网站源码
微信源码
素材特效
源码插件
视频教程
建站学院
热门搜索: 织梦  农业种植  农业  安全设置  官方
258资源分享 > 建站学院 > 微信开发 > 小程序开发实践总结

推荐下载

HTML5响应式自适应网咯设计

2020-05-12   浏览:740

高端HTML5响应式企业通用网

2020-05-06   浏览:521

html5响应式外贸网站英文版

2020-05-08   浏览:510

HTML5自适应律师工作室类网

2020-04-04   浏览:504

HTML5影视传媒文化公司类网

2020-05-12   浏览:500

小程序开发实践总结

发布时间:2020-10-12  

css样式不能引用本地图片资源,只能引用线上资源( background-image ),引用本地图片资源只能用 <image> 标签。

{{}} 不能执行函数方法, {{}} 只支持基本的简单运算和ES6拓展运算符。如价格格式化这种常用的处理,只能在js代码中处理好然后再模板中渲染。

this.setData({ price: this.formatPrice(this.data.price) }) 复制代码

可以通过 wxs 模块解决 {{}} 中不能执行函数的问题。可以做到模拟vue.js中过滤器的功能。

<!-- wxml模板 --> <wxs src=http://www.yiyongtong.com/archives/"../../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的数据,通常有两种方式来实现(我司采用了方案二):

在页面A监听onShow事件,在onShow事件触发时无脑更新页面数据。

通过EventBus来实现跨页面通信。

复杂组件的开发,省市区三级联动选择器的开发,获取微信地址库的地址的编码和业务采用的省市区编码对不上。

页面路径的层级,最大不能超过10层。

小程序小程序分包加载,微信对小程序包的大小有如下限制。

整个小程序所有分包大小不超过 8M

单个分包/主包大小不能超过 2M

微信小程序主流框架对比

wepy

mpvue

Taro

wepy

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

类Vue.js的语法风格,适合我们团队原有的的技术栈

支持组件化(当时微信官方的API还不支持组件化)

支持加载外部npm包

支持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

本文标签

: