微信小程序,一个有局限的类似 React Native 轮子!
微信小程序就是一个类似RN的轮子,可以快速开发,有一定的适用场景,但是也有其局限性。(结论是基于微信小程序的示例代码做的解读,可能存在谬误。
文末有好奇心日报小程序的二维码,欢迎围观。
2016年11月25日 更新
更新一些最新的认识和进展。
首先微信小程序不是纯原生应用,是一种奇怪Hybrid模式,之前的观点是错的,那么为什么是奇怪的混合模式呢?看下图:
Paste_Image.png
上图中的辅助线表示一个单独的原生view(原生view:原生页面渲染的最小的组件,webivew、list、imageview都是它的子类),显然,除了app.json配置的组件之外,内容部只包含一个view,也就是说,内容部分并不是有多个原生view组合而成的,所以内容部分应该是微信定制化的一个webview组件。
更新一些新遇到的微信小程序的问题以及解决方案:
✦ 微信小程序的swiper可以设置vertical,文档不写也是醉了。
✦ 微信小程序的事件不能阻止,所以不能实现完美效果的fullpage,会出现上下拉扯的感觉,因为无法阻止父节点的touch事件。
✦ 最新的微信开发工具移除了promise,建议手动引入es6-promise。突然移除某些功能略坑啊。
// 将常规的网络请求封装成promise模式
import Promise from '../vendor/es6-promise.js';function request(method = 'GET') {return function(url, data = {}) {return new Promise(function(resolve, reject) {wx.request({url,data,method,header: {'Content-Type': 'application/json'},success: function(res) {resolve(res.data)},fail: function(err) {reject(err)}});})}
}export const get = request('GET');
export const post = request('POST');
export const put = request('PUT');
export const del = request('DELETE');
✦ 对于原生API,想要promise的话,可以使用如下代码
import Promise from '../vendor/es6-promise.js';module.exports = (api) => {return (options, ...params) => {return new Promise((resolve, reject) => {api(Object.assign({}, options, { success: resolve, fail: reject }), ...params);});}
}// 使用
const getLocation = promisify(wx.getLocation);
2016年11月15日 更新
最近尝试了下小程序,之前的猜测和判断完全正确。
早先看到很多“权威人士”说是Hybrid模式,一度怀疑自己博客的准确性,担心误导别人,所以额外备注可能存在谬误,目前来看,这篇博客的判断比市场上大部分博客的判断都准确。
简单总结下观点:
✦ 微信小程序是原生应用,是React Native和weex类似的模式
✦ 微信小程序的生态除了官方提供的组件和API,几乎没有其他的组件。所以部分“复杂”的功能,开发起来真的很复杂。
✦ 微信小程序只能运行在微信中。
✦ 由于微信的限制,微信小程序应用场景极度有限。
大家想知道微信小程序能干什么?对比服务号就知道了,比如订票、航旅信息、ToDoList、天气日历、星座、理财、实时点菜系统等,核心是低频但重要的需求。而且微信不允许分享(导流),不允许链接(导流或广告),所以想要靠微信朋友圈爆发的小机灵被彻底被浇灭了,媒体也不适合微信小程序。
此外,不得不吐槽一下微信和微信小程序:
✦ 微信小程序的官方文档写得不完善,很多方面没有覆盖。
如何定义一个组件;
无法使用less或者sass之类的预编译;
wxml没得到主流编辑器的支持,导致开发速度偏慢;
想要解决less和wxml问题?可以参考这个:wxapp-redux-starter;
✦ 微信小程序的开发工具极不稳定。
和shadowsocks等VPN冲突;
经常无故卡死;
开发工具和真机表现偶尔会有差异;
有时候代码无故不生效,需要重启才行;
没有类似HMR的机制导致经常刷新;
调试工具不好用等等。
✦ 微信小程序的生态和问答社区几乎为零。
微信的生态为零,导致部分功能开发起来吃力,比如解析富文本。
微信的问答社区就更差了,遇到问题全靠猜,实在找不到办法就重启。
✦ 微信小程序的应用场景太受限,和微信的一贯保守风格很像,或许以后会慢慢放开,慢慢期待吧。
以上观点是站在一个普通开发者对微信小程序的看法,相反,从微信角度出发,某些限制和规范的确很有必要。希望大家客观对待微信小程序。
============ 分割线 ============
本文针对微信小程序的示例代码进行分析,告诉大家:
微信小程序到底提供了什么?
开发微信小程序方便么?
微信小程序具体适用场景?
最后还自作主张的说了点对于微信小程序的个人观点。
微信小程序都提供了什么?
微信小程序主要为我们提供了两部分东西:底层API 和 组件,不仅如此,微信小程序还引入新的文件格式。
引入了新的文件格式
微信小程序并不是传统意义的H5页面,微信定义了新的文件格式,然后对这些文件做编译解析,所以微信小程序是原生应用!是基于微信的原生应用!微信正式尝试做一个OS!
微信小程序组件
上图是一个wx-action-sheet组件,文件应用了新的后缀。
其中wxml功能和HTML类似,wxss功能和CSS类似,JS包含组件逻辑。这点是不是和RN/weex很像?
微信提供了一套基础组件库
微信为微信小程序提供了一套基础组件库,可以满足开发的基础开发需求,从而实现简单的快速开发,至于这些基础组件支持多大程度的自定义,以及能否满足实际项目的需求,留给后续开发者去体验吧。
基础组件库主要分为四类:
控件(controller)主要包括:
action-sheet
/ button
/ searchbar
/ modal
/ navigator
/ drawer
表单(form)主要包括:
checkbox
/ radio
/ form
,selector
/ switch
/ slider
/ input
/ label
/ picker
媒体(media)主要包括:
image
/ audio
/ video
视图(view)主要包括:
progress
/ toast
/ scroll-view
/ text
/ view
/ mask
/ icon
/ spinner
/ swiper
/ slide-tab
恩,这些组件不用介绍大家也都知道大概是什么功能了,几乎是每个UI组件库都必备的。以后大家应该都基于这个组件库去开发具体的产品,和RN/weex不同的是,微信小程序多半只能基于微信提供的组件进行个性化封装了,而不能基于系统组件进行个性化封装,原因很简单,因为微信就是一个“系统”。
微信是一个“系统”
我们挑一个稍微复杂的picker组件示例来分析分析:
// wx-picker.wxml文件
<view class="page"><view class="page__hd"><text class="page__title">picker</text><text class="page__desc">选择器</text></view><view class="page__bd"><view class="section"><view class="section__title">地区选择器</view><picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"><view class="picker">当前选择:{{array[index]}}</view></picker></view><view class="section"><view class="section__title">日期选择器</view><picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange"><view class="picker">当前选择: {{date}}</view></picker></view></view>
</view>
是的,所有的标签都是自定义标签,进一步佐证了微信小程序是原生应用,组件使用很简单,所以很适合快速开发。
// wx-picker.js 文件
Page({data: {array:["中国","美国","巴西","日本"],index:0,date:"2016-09-01"},bindPickerChange: function(e) {console.log('picker发送选择改变,携带值为', e.detail.value)this.setData({index: e.detail.value})},bindDateChange:function(e){this.setData({date:e.detail.value})},bindTimeChange:function(e){this.setData({time:e.detail.time})}
})
也很清晰,通过this.setData来设置属性,实现action-sheet的显示与隐藏切换。React的感觉,连API都很像。
// wx-picker.wxss
.picker{padding: 13px;background-color: #FFFFFF;
}
可以重新设置微信小程序的组件样式,和CSS很相似,轻量简洁。
底层API
没有提供底层API的基础组件库都是流氓库,有了底层API才能开发真正的原生应用,才能做更多丰富的功能。
其中底层API包括:
animation
/ backgronud-audio
/ canvas
/ download-file
/ file
/ get-location
/ get-network-type
/ get-system-info
/ get-user-info
/ image
/ login
/ navigation-bar-loading
/ navigator
/ on-accelerometer-change
/ on-compass-change
/ open-location
/ pull-down-refresh
/ request
/ request-payment
/ set-navigation-bar-title
/ storage
/ upload-file
/ voice
/ web-socket
从名字也能看出大概,提供了比较完整的API,能够开发更丰富的功能和程序。
我们仍然挑一个稍微复杂点的图片相关的API使用示例来分析分析:
// image.wxml文件
<import src="../common/header.wxml" />
<import src="../common/footer.wxml" /><view class="container"><template is="header" data="{{title: 'choose/previewImage'}}"/><view class="page-body"><view class="page-body-wrapper"><form bindsubmit="openLocation"><view class="page-body-form"><picker range="{{sourceType}}" bindchange="sourceTypeChange" value="{{sourceTypeIndex}}"><view class="page-body-form-picker"><view class="page-body-form-picker-key">图片来源</view><view class="page-body-form-picker-value">{{sourceType[sourceTypeIndex]}}</view></view></picker><picker range="{{sizeType}}" bindchange="sizeTypeChange" value="{{sizeTypeIndex}}"><view class="page-body-form-picker"><view class="page-body-form-picker-key">图片质量</view><view class="page-body-form-picker-value">{{sizeType[sizeTypeIndex]}}</view></view></picker><picker range="{{count}}" bindchange="countChange" value="{{countIndex}}"><view class="page-body-form-picker" style="border-bottom: none;"><view class="page-body-form-picker-key">数量限制</view><view class="page-body-form-picker-value">{{count[countIndex]}}</view></view></picker></view><view class="images-wrapper"><text class="images-text">请选择图片</text><view class="images-list"><block wx:for-items="{{imageList}}" wx:for-item="image"><image src="{{image}}" class="images-image" data-src="{{image}}" bindtap="previewImage"></image></block><image src="/image/plus.png" class="images-image images-image-plus" bindtap="chooseImage"></image></view></view></form></view></view><template is="footer" />
</view>
简单清晰wxml,居然让选择图片并预览实现起来这么简单。并且可以通过简单的template语法来引入其他wxml文件。
// image.js 文件
var sourceType = [ ['camera'], ['album'], ['camera', 'album'] ]
var sizeType = [ ['compressed'], ['original'], ['compressed', 'original'] ]Page({data: {sourceTypeIndex: 0,sourceType: ['拍照', '相册', '拍照或相册'],sizeTypeIndex: 0,sizeType: ['压缩', '原图', '压缩或原图'],countIndex: 0,count: [1, 2, 3, 4, 5, 6, 7, 8, 9]},sourceTypeChange: function (e) {this.setData({sourceTypeIndex: e.detail.value})},sizeTypeChange: function (e) {this.setData({sizeTypeIndex: e.detail.value})},countChange: function (e) {this.setData({countIndex: e.detail.value})},chooseImage: function () {var that = thiswx.chooseImage({sourceType: sourceType[this.data.sourceTypeIndex],sizeType: sizeType[this.data.sizeTypeIndex],count: this.data.count[this.data.countIndex],success: function (res) {console.log(res)that.setData({imageList: res.tempFilePaths})}})},previewImage: function (e) {var current = e.target.dataset.srcwx.previewImage({current: current,urls: this.data.imageList})}
})
因为微信对这个API已经封装得很好了,所以使用起来只需要传入几个参数,绑定一下回调函数即可。
// image.css 文件
.images-wrapper {padding: 20rpx;background-color: #fff;margin-top: 20rpx;
}
.images-wrapper-text {font-size: 28rpx;
}
.images-list {display: flex;margin-top: 20rpx;flex-wrap: wrap;
}
.images-image {width: 150rpx;height: 150rpx;margin: 10rpx;
}
.images-image-plus {border: 1px solid #999;
}
同样,样式通过类似CSS的语法,从上面的rpx单位可以看出,这不是真正的CSS,我猜测是CSS的子集,类似RN。
开发微信小程序方便么?
微信小程序的开发目录结构
WX的开发目录结构也很清晰简单。
WX目录结构
入口文件就是最外层的app.js
,app.json
,app.wxss
。
app.js
提供了入口文件的一些初始化和绑定。
app.json
提供了项目的结构和一些项目配置,微信之所以采用app.json的模式声明项目需要加载的页面和组件,应该是为了方便实现云端编译打包然后下发到微信吧。
app.wxss
就是样式啦。
page目录
放你需要实现具体功能的页面。
util
存放项目需要用到的一些工具函数。
// app.json
{"pages": ["page/component/component-pages/wx-picker/wx-picker","page/API/image/image"],"window": {"navigationBarTextStyle": "black","navigationBarTitleText": "小程序演示","navigationBarBackgroundColor": "#fbf9fe","backgroundColor": "#fbf9fe"},"tabBar": {"color": "#dddddd","selectedColor": "#3cc51f","borderStyle": "black","backgroundColor": "#ffffff","list": [{"pagePath": "page/component/index","iconPath": "image/wechat.png","selectedIconPath": "image/wechatHL.png","text": "组件"}, {"pagePath": "page/API/index/index","iconPath": "image/wechat.png","selectedIconPath": "image/wechatHL.png","text": "接口"}]},"networkTimeout": {"request": 10000,"connectSocket": 10000,"uploadFile": 10000,"downloadFile": 10000},"debug": true
}
微信小程序的部署流程
微信小程序采用的基于微信的是原生开发,安装和使用应该都要很轻量,所以微信采用云端编译打包的方式,将编译后的文件发送到微信上,然后微信内置的解析器会解析这个文件并渲染。
简而言之,微信小程序的开发体验还算流畅,代码可读性也很高,也不需要做太多新的知识储备,但是有硬伤,后文会分析。
微信小程序适合你吗?
这一块就不细讲了,毕竟不是我擅长的,借用网上的分析,用两张图片告诉你微信小程序的适用场景。
行业区分
微信小程序适合什么
所以,微信小程序更适合用来做低频高需的服务,比如酒店订阅,火车票/机票订阅,招聘,理财等。
总结点什么?
每次的总结都是为了更快的结束写文章的“枯燥”过程,也为了让大家更快的看到文章。
以下代表个人观点,仅供参考,也欢迎讨论。
从产品层面来说,值得一试!
- 微信提供了不错的底层API以及还算丰富的组件库,让小程序可以快速开发并且拥有原生体验,相对之前的公众号/服务号,体验更好。
- 微信流量很大,对于部分中小产品来说,是一次机会。
- 一些低频高需产品也许很适合,比如订票,用户打开页面,简单选择,然后微信支付,感觉还挺爽的。
从技术栈来说,我不喜欢!
- 微信小程序是基于微信生态的,而这个生态目前太不成熟。
- 只能在微信中运行,多半不支持在浏览器或者其他地方运行,也就是说,并没有减少产品的开发成本,反倒是多了一个开发流水线。
- 新的语法糖,开发调试环境也不友好,开发者会有阵痛期。
YY一下,如果微信小程序的技术栈是RN而不是造一个轮子,那感觉才爽!!
微信小程序,一个有局限的类似 React Native 轮子!相关推荐
- 微信小程序,一个有局限的类似 React Native 轮子
微信小程序就是一个类似RN的轮子,可以快速开发,有一定的适用场景,但是也有其局限性.(结论是基于微信小程序的示例代码做的解读,可能存在谬误. 文末有好奇心日报小程序的二维码,欢迎围观. 2016年11 ...
- 微信小程序手把手教你实现类似Android中ViewPager控件效果
微信小程序手把手教你实现类似Android中ViewPager控件效果 前言 需求分析 头部TAB 滑动的内容部分 最终版本 尾巴 前言 在做Android开发的时候,ViewPager是开发者使用频 ...
- 在微信小程序上,帮助中心界面实现类似手风琴案例
在微信小程序上,帮助中心界面实现类似手风琴案例 wxml <view class="container"><block wx:for="{{arrdat ...
- 企业微信获取用户信息响应40029(微信小程序与公众号出现类似问题应该是同样的原因)
企业微信获取用户信息响应40029 在对接企业微信的时候需要通过code去获取userId,但是会返回40029的error码,经过测试与验证原因是访问地址 https://open.weixin.q ...
- 微信小程序-一个跑步app
前言 我已经把全部代码放在github上-weChatApp-Run,可以下载来看看或者先star收藏,我以后还会进行一些优化更新.现在只是一个学习Demo,大家沟通学习,实际应用还需更多优化. 正文 ...
- 微信小程序开发笔记 进阶篇②——多个微信小程序一个用户体系,同一个UnionID
目录 微信开放平台绑定小程序 微信小程序login和getUserInfo 后台请求auth.code2Session 后台解密开放数据 微信开放平台绑定小程序 微信官方文档:UnionID 机制说明 ...
- 微信小程序一个按钮同时获取用户信息和手机号码
<view class="login" bindtap='getuserInfo'><button open-type="getPhoneNumber& ...
- 微信小程序一个简单聊天室
cha.js // pages/chat/chat.js // 获取小程序实例 let app = getApp(); Page({/*** 页面的初始数据*/data: {nickname:'',a ...
- 微信小程序一个你可能需要的功能
根据工作需要.需要做一个图片选中部分区域的效果.百度了很久,都没有见有.于是就自己写了个,需要的可以借鉴下,还有很多需要改善的地方 现在先看看效果 效果图 那这个有什么用呢..需求是选中图片的某个区域 ...
最新文章
- IDEA常用和实用配置以及各种必要插件
- java重新组合_Java 合并Word文档
- HTML5+CSS学习心得
- 分布式系统事务一致性解决方案
- register---C语言中最快的关键字
- centos7 部署和配置Mysql5
- [css] height和line-height的区别是什么呢?
- 组合数学 —— 组合数取模
- 从fragment启动另一个fragment
- 内购订单进行二次处理_游戏内购要涨价?谷歌效仿苹果:安卓内购抽成30%
- Codeforces Round #499 (Div. 2) C. Fly(数学+思维模拟)
- python计算平均值画折线图_【中年阿姨python入门】绘制折线图
- 决策树分析例题经典案例_决策树例题经典案例280_决策树在产品满意因素分析中的应用...
- Greedy method and ε-greedy method
- 用C语言建立一个顺序栈
- 用阳光心态去实现快乐工作
- 从“棱镜门”事件看数据安全如何保护
- js技术输入框中输入身份证号自动带出年龄,生日,性别
- 一些浏览器HACKS
- Linux 中的TAB键妙用