微信小程序,一个有局限的类似 React Native 轮子!

React & React Native系列齐修_qixiuss 发表了文章 • 0 个评论 • 29751 次浏览 • 2016-09-22 20:11 • 来自相关话题

先抛出结论:微信小程序就是一个类似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的机制导致经常刷新;

调试工具不好用等等。

✦ 微信小程序的生态和问答社区几乎为零。

微信的生态为零,导致部分功能开发起来吃力,比如解析富文本。

微信的问答社区就更差了,遇到问题全靠猜,实在找不到办法就重启。

✦ 微信小程序的应用场景太受限,和微信的一贯保守风格很像,或许以后会慢慢放开,慢慢期待吧。

以上观点是站在一个普通开发者对微信小程序的看法,相反,从微信角度出发,某些限制和规范的确很有必要。希望大家客观对待微信小程序。

============ 分割线 ============

本文针对微信小程序的示例代码进行分析,告诉大家:

微信小程序到底提供了什么?

开发微信小程序方便么?

微信小程序具体适用场景?

最后还自作主张的说了点对于微信小程序的个人观点。

[h1]微信小程序都提供了什么?[/h1]
微信小程序主要为我们提供了两部分东西:底层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" >
<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 = this
wx.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.src

wx.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。

[h1]开发微信小程序方便么?[/h1]
微信小程序的开发目录结构
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
}

微信小程序的部署流程
微信小程序采用的基于微信的是原生开发,安装和使用应该都要很轻量,所以微信采用云端编译打包的方式,将编译后的文件发送到微信上,然后微信内置的解析器会解析这个文件并渲染。

简而言之,微信小程序的开发体验还算流畅,代码可读性也很高,也不需要做太多新的知识储备,但是有硬伤,后文会分析。

[h1]微信小程序适合你吗?[/h1]
这一块就不细讲了,毕竟不是我擅长的,借用网上的分析,用两张图片告诉你微信小程序的适用场景。







行业区分







微信小程序适合什么

所以,微信小程序更适合用来做低频高需的服务,比如酒店订阅,火车票/机票订阅,招聘,理财等。

[h1]总结点什么?[/h1]
每次的总结都是为了更快的结束写文章的“枯燥”过程,也为了让大家更快的看到文章。

以下代表个人观点,仅供参考,也欢迎讨论。

从产品层面来说,值得一试!
微信提供了不错的底层API以及还算丰富的组件库,让小程序可以快速开发并且拥有原生体验,相对之前的公众号/服务号,体验更好。微信流量很大,对于部分中小产品来说,是一次机会。一些低频高需产品也许很适合,比如订票,用户打开页面,简单选择,然后微信支付,感觉还挺爽的。
从技术栈来说,我不喜欢!
微信小程序是基于微信生态的,而这个生态目前太不成熟。只能在微信中运行,多半不支持在浏览器或者其他地方运行,也就是说,并没有减少产品的开发成本,反倒是多了一个开发流水线。新的语法糖,开发调试环境也不友好,开发者会有阵痛期。
YY一下,如果微信小程序的技术栈是RN而不是造一个轮子,那感觉才爽!!

想体验小程序?看这儿








好奇心小程序 查看全部

先抛出结论:微信小程序就是一个类似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的机制导致经常刷新;

调试工具不好用等等。

✦ 微信小程序的生态和问答社区几乎为零。

微信的生态为零,导致部分功能开发起来吃力,比如解析富文本。

微信的问答社区就更差了,遇到问题全靠猜,实在找不到办法就重启。

✦ 微信小程序的应用场景太受限,和微信的一贯保守风格很像,或许以后会慢慢放开,慢慢期待吧。

以上观点是站在一个普通开发者对微信小程序的看法,相反,从微信角度出发,某些限制和规范的确很有必要。希望大家客观对待微信小程序。

============ 分割线 ============

本文针对微信小程序的示例代码进行分析,告诉大家:

微信小程序到底提供了什么?

开发微信小程序方便么?

微信小程序具体适用场景?

最后还自作主张的说了点对于微信小程序的个人观点。

[h1]微信小程序都提供了什么?[/h1]
微信小程序主要为我们提供了两部分东西:底层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" >
<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 = this
wx.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.src

wx.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。

[h1]开发微信小程序方便么?[/h1]
微信小程序的开发目录结构
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
}

微信小程序的部署流程
微信小程序采用的基于微信的是原生开发,安装和使用应该都要很轻量,所以微信采用云端编译打包的方式,将编译后的文件发送到微信上,然后微信内置的解析器会解析这个文件并渲染。

简而言之,微信小程序的开发体验还算流畅,代码可读性也很高,也不需要做太多新的知识储备,但是有硬伤,后文会分析。

[h1]微信小程序适合你吗?[/h1]
这一块就不细讲了,毕竟不是我擅长的,借用网上的分析,用两张图片告诉你微信小程序的适用场景。







行业区分







微信小程序适合什么

所以,微信小程序更适合用来做低频高需的服务,比如酒店订阅,火车票/机票订阅,招聘,理财等。

[h1]总结点什么?[/h1]
每次的总结都是为了更快的结束写文章的“枯燥”过程,也为了让大家更快的看到文章。

以下代表个人观点,仅供参考,也欢迎讨论。

从产品层面来说,值得一试!
  1. 微信提供了不错的底层API以及还算丰富的组件库,让小程序可以快速开发并且拥有原生体验,相对之前的公众号/服务号,体验更好。
  2. 微信流量很大,对于部分中小产品来说,是一次机会。
  3. 一些低频高需产品也许很适合,比如订票,用户打开页面,简单选择,然后微信支付,感觉还挺爽的。

从技术栈来说,我不喜欢!
  1. 微信小程序是基于微信生态的,而这个生态目前太不成熟。
  2. 只能在微信中运行,多半不支持在浏览器或者其他地方运行,也就是说,并没有减少产品的开发成本,反倒是多了一个开发流水线。
  3. 新的语法糖,开发调试环境也不友好,开发者会有阵痛期。

YY一下,如果微信小程序的技术栈是RN而不是造一个轮子,那感觉才爽!!

想体验小程序?看这儿








好奇心小程序



微信小程序开发资源整理

微信小程序于连林520wcf 发表了文章 • 0 个评论 • 3424 次浏览 • 2016-09-23 09:16 • 来自相关话题

有兴趣学习微信小程序开发的可以关注简书专题 微信小程序开发


由于微信已经开发文档和开发工具了,所以下面的内容用处不大了。

具体参考:http://mp.weixin.qq.com/wiki/


这篇文章只是资源的搬运工, 感谢各位大神的无私奉献。

由于微信小程序只邀请了200个大V内测,但是这些大V好多都是不写代码的CTO了,让真正想学习些代码的灰常着急。

俗话说高手在民间,没过多久就有大神把文档和0.7的破解版发出来了。但是下午,微信就发布了0.9版本,封杀了之前破解的。经过大神们的不懈努力,0.9版本也在昨晚攻陷了。


文档:
官方地址(目前内测用户才能查看文档)https://mp.weixin.qq.com/wxopen/wawiki

[h1]开发文档[/h1]
http://wxopen.notedown.cn/

介绍http://wxopen.notedown.cn/introduction

设计http://wxopen.notedown.cn/design

运营http://wxopen.notedown.cn/product

开发http://wxopen.notedown.cn/api

[h1]相关资源[/h1]
开发群:QQ 511389428开发工具 v0.7百度: https://pan.baidu.com/s/1pLTKIqJ (密码: iswg)360: https://yunpan.cn/ckvTYFHWzYYFV (提取码:e09b)开发工具 v0.9百度: https://pan.baidu.com/s/1pLTKIqJ (密码: iswg)360: https://yunpan.cn/ckvXjEbnFYMSC (提取码:f9ca)Demo源代码百度: https://pan.baidu.com/s/1o8hJFuU (密码: bsky)360: https://yunpan.cn/ckvXAacJjvsgR (提取码:3327)[h1]破解步骤[/h1]Mac测试可用,Windows测试可用[list=1]下载开发工具,并安装(注意:一定要安装0.9版本)打开『微信Web开发者工具』的程序目录Windows:使用资源管理器查看Mac:右键点击图标,选择『显示包内容』[list=1]进入程序目录后,替换以下文件(只需要替换0.9版本里的,0.7版本用来登陆):Windows:\package.nw\app\dist\components\create\createstep.js\package.nw\app\dist\stroes\projectStores.jsMac:/Resources/app.nw/app/dist/components/create/createstep.js/Resources/app.nw/app/dist/stroes/projectStores.js注意,这里微信工程师拼写错了,是stroes没错!!!替换的文件点击这里下载[list=1]Good luck[h1]扫码无法登录问题 please bind your wechat account to the appid first[/h1]先使用0.7版本[Windows|Mac]的进行扫码登陆登陆成功后,再用0.9版本打开就直接进入了[h1]使用教程[/h1][list=1]运行『微信Web开发者工具』通过微信扫描二维码创建项目AppID:随便填项目名称:随便填本地开发目录:选择一个目录[list=1]点击「添加项目」此时如果出错,先退出再重进此时,能够看到项目列表了[list=1]打开项目开始开发Good luck[h1]常见问题[/h1][list=1]找不到所要替换的文件问题原因:开发工具版本不正确,老版本不支持解决方案:确保下载的程序版本在0.9.092100以上[list=1]Failed to load resource: net::ERR_NAME_NOT_RESOLVED http://1709827360.appservice.open.weixin.qq.com/appservice问题原因:通常是由于系统设置了代理如Shadowsocks等。解决方案:关闭代理,或者依次点击工具栏“动作”-"设置",选择“不使用任何代理,勾选后直连网络”。[list=1]修复asdebug.js报错问题原因:TypeError: Cannot read property 'MaxRequestConcurrent' of undefined解决方案:替换 /Resources/app.nw/app/dist/weapp/appservice/asdebug.js[list=1]扫码登录失败问题原因:please bind your wechat account to the appid first解决方案:先使用0.7版本的进行扫码登陆,登陆成功后,再用0.9的版本打开就直接进入了。0.7版本地址:http://dldir1.qq.com/WechatWebDev/release/0.7.0/wechat_web_devtools_0.7.0.dmg
[h1]工具截图[/h1]






IDE







IDE

[h1]相关链接[/h1]
https://github.com/Notedown-cn/wxopen

https://github.com/gavinkwoe/weapp-ide-crack

http://www.diycode.cc/topics/308

http://www.geek-zoo.com

更多精彩请关注微信公众账号likeDev。







likeDev 查看全部


有兴趣学习微信小程序开发的可以关注简书专题 微信小程序开发


由于微信已经开发文档和开发工具了,所以下面的内容用处不大了。

具体参考:http://mp.weixin.qq.com/wiki/


这篇文章只是资源的搬运工, 感谢各位大神的无私奉献。

由于微信小程序只邀请了200个大V内测,但是这些大V好多都是不写代码的CTO了,让真正想学习些代码的灰常着急。

俗话说高手在民间,没过多久就有大神把文档和0.7的破解版发出来了。但是下午,微信就发布了0.9版本,封杀了之前破解的。经过大神们的不懈努力,0.9版本也在昨晚攻陷了。


文档:
官方地址(目前内测用户才能查看文档)https://mp.weixin.qq.com/wxopen/wawiki

[h1]开发文档[/h1]
http://wxopen.notedown.cn/

介绍http://wxopen.notedown.cn/introduction

设计http://wxopen.notedown.cn/design

运营http://wxopen.notedown.cn/product

开发http://wxopen.notedown.cn/api

[h1]相关资源[/h1]
[h1]破解步骤[/h1]Mac测试可用,Windows测试可用[list=1]
  • 下载开发工具,并安装(注意:一定要安装0.9版本
  • 打开『微信Web开发者工具』的程序目录
    • Windows:使用资源管理器查看
    • Mac:右键点击图标,选择『显示包内容』
    [list=1]
  • 进入程序目录后,替换以下文件(只需要替换0.9版本里的,0.7版本用来登陆):
    • Windows:
        \package.nw\app\dist\components\create\createstep.js
      • \package.nw\app\dist\stroes\projectStores.js
    • Mac:
        /Resources/app.nw/app/dist/components/create/createstep.js
      • /Resources/app.nw/app/dist/stroes/projectStores.js
    注意,这里微信工程师拼写错了,是stroes没错!!!替换的文件点击这里下载[list=1]
  • Good luck
  • [h1]扫码无法登录问题 please bind your wechat account to the appid first[/h1]先使用0.7版本[Windows|Mac]的进行扫码登陆登陆成功后,再用0.9版本打开就直接进入了[h1]使用教程[/h1][list=1]
  • 运行『微信Web开发者工具』
  • 通过微信扫描二维码
  • 创建项目
    • AppID:随便填
    • 项目名称:随便填
    • 本地开发目录:选择一个目录
    [list=1]
  • 点击「添加项目」
    • 此时如果出错,先退出再重进
    • 此时,能够看到项目列表了
    [list=1]
  • 打开项目
  • 开始开发
  • Good luck
  • [h1]常见问题[/h1][list=1]
  • 找不到所要替换的文件
    • 问题原因:开发工具版本不正确,老版本不支持
    • 解决方案:确保下载的程序版本在0.9.092100以上
    [list=1]
  • Failed to load resource: net::ERR_NAME_NOT_RESOLVED http://1709827360.appservice.open.weixin.qq.com/appservice
    • 问题原因:通常是由于系统设置了代理如Shadowsocks等。
    • 解决方案:关闭代理,或者依次点击工具栏“动作”-"设置",选择“不使用任何代理,勾选后直连网络”。
    [list=1]
  • 修复asdebug.js报错
    • 问题原因:TypeError: Cannot read property 'MaxRequestConcurrent' of undefined
    • 解决方案:替换 /Resources/app.nw/app/dist/weapp/appservice/asdebug.js
    [list=1]
  • 扫码登录失败

  • [h1]工具截图[/h1]






    IDE







    IDE

    [h1]相关链接[/h1]
    https://github.com/Notedown-cn/wxopen

    https://github.com/gavinkwoe/weapp-ide-crack

    http://www.diycode.cc/topics/308

    http://www.geek-zoo.com

    更多精彩请关注微信公众账号likeDev。







    likeDev


    构建"微信小程序"以及解决登录失败的解决办法

    微信开发徐不同 发表了文章 • 0 个评论 • 10035 次浏览 • 2016-09-23 10:57 • 来自相关话题

    等了好久的小程序,终于在近日曝光了。现在就带大家来尝尝鲜。以下是一张随便看看的图。




    zxl.jpg-34.1kB

    一、构建微信小程序的步骤
    [list=1]下载开发工具考虑到微信0.9.092100的Web开发者工具对于登录做了限制,所以下载登录还是需要一点门路的,我在下面有介绍,希望大家耐心的往下面看~下载工具的地址:链接 密码: r3hc。[h3]破解的步骤就是:将破解压缩包的两个文件,放到如下图路径:[/h3]这个是MAC路径:应用程序->微信web开发者工具->显示包内容/Resources/app.nw/app/dist/components/create/createstep.js/Resources/app.nw/app/dist/stores/projectStores.jsWin目录:E:\微信web开发者工具\package.nw\app\dist\stroes\projectStores.jsE:\微信web开发者工具\package.nw\app\dist\weapp\appservice\asdebug.js如下图:QQ20160923-1.png-100.6kBQQ20160923-2.png-96kB2.下载Demo,文档下载地址:地址密码: 587y3.导入Demo打开微信Web开发工具,扫码登录,大家会出现一个问题。如图:QQ20160923-0.png-130.6kB登录失败,错误信息:Please bind your wechat account to the appid first解决办法:下载旧版本的安装包,登录后,在打开新版本的开发工具即可。旧的指的是0.7,新版本指的是0.9,旧版本地址:旧版本,密码: zasb登录成功之后,跟我做下面的步骤QQ20160923-3.png-17.3kB点击添加项目,之后配置参数,如下图QQ20160923-4.png-56.6kB下一步之后,大家便可以看到QQ20160923-5.png-402kB
    这就是微信小程序Demo的演示,后期我会陆续放上更多更有趣的微信小应用开发的教程的,谢谢大家~

    如果您喜欢我的文章,不要忘记关注我,谢谢大家了~

    另外如果您要转载,希望可以注明出处,我会写出更多更好的文章,来回馈大家~ 查看全部


    等了好久的小程序,终于在近日曝光了。现在就带大家来尝尝鲜。以下是一张随便看看的图。




    zxl.jpg-34.1kB

    一、构建微信小程序的步骤
    • [list=1]下载开发工具考虑到微信0.9.092100的Web开发者工具对于登录做了限制,所以下载登录还是需要一点门路的,我在下面有介绍,希望大家耐心的往下面看~下载工具的地址:链接 密码: r3hc。
    [h3]破解的步骤就是:将破解压缩包的两个文件,放到如下图路径:[/h3]这个是MAC路径:应用程序->微信web开发者工具->显示包内容/Resources/app.nw/app/dist/components/create/createstep.js/Resources/app.nw/app/dist/stores/projectStores.jsWin目录:E:\微信web开发者工具\package.nw\app\dist\stroes\projectStores.jsE:\微信web开发者工具\package.nw\app\dist\weapp\appservice\asdebug.js如下图:QQ20160923-1.png-100.6kBQQ20160923-2.png-96kB
    • 2.下载Demo,文档下载地址:地址密码: 587y
    • 3.导入Demo打开微信Web开发工具,扫码登录,大家会出现一个问题。如图:
    QQ20160923-0.png-130.6kB登录失败,错误信息:Please bind your wechat account to the appid first解决办法:下载旧版本的安装包,登录后,在打开新版本的开发工具即可。旧的指的是0.7,新版本指的是0.9,旧版本地址:旧版本,密码: zasb登录成功之后,跟我做下面的步骤QQ20160923-3.png-17.3kB
    • 点击添加项目,之后配置参数,如下图QQ20160923-4.png-56.6kB下一步之后,大家便可以看到QQ20160923-5.png-402kB

    这就是微信小程序Demo的演示,后期我会陆续放上更多更有趣的微信小应用开发的教程的,谢谢大家~

    如果您喜欢我的文章,不要忘记关注我,谢谢大家了~

    另外如果您要转载,希望可以注明出处,我会写出更多更好的文章,来回馈大家~


    微信小程序开发-Demo如何导入

    微信小程序技术栈汗青fullstack 发表了文章 • 0 个评论 • 1737 次浏览 • 2016-09-23 15:11 • 来自相关话题

    微信小程序一出,立马炸开了锅,都去搭建自己的开发环境,我这里也来尝尝先,之前发了一篇文章,有人问Demo怎么导入?

    Demo源代码下载(官方Demo)


    [h3]demo导入方式:[/h3]
    打开“微信web开发者工具” -->添加项目-->填写AppID(随便填)、项目名称(随便填),选择本地开发目录(Demo存放地址)-->点击“添加项目” 即可


    配图:







    CC35BBFC-2CEB-4468-8B26-2EE732272246.png







    BBFC91C5-037A-41B6-9B6E-74F4C9FBB28B.png

    小Demo走起!







    9F27EF3D-0521-4D74-8181-4C7B9EFEF68F.png 查看全部

    微信小程序一出,立马炸开了锅,都去搭建自己的开发环境,我这里也来尝尝先,之前发了一篇文章,有人问Demo怎么导入?

    Demo源代码下载(官方Demo)


    [h3]demo导入方式:[/h3]
    打开“微信web开发者工具” -->添加项目-->填写AppID(随便填)、项目名称(随便填),选择本地开发目录(Demo存放地址)-->点击“添加项目” 即可


    配图:







    CC35BBFC-2CEB-4468-8B26-2EE732272246.png







    BBFC91C5-037A-41B6-9B6E-74F4C9FBB28B.png

    小Demo走起!







    9F27EF3D-0521-4D74-8181-4C7B9EFEF68F.png


    微信小程序将会带来的“红利”

    日记本暂住16楼 发表了文章 • 0 个评论 • 1504 次浏览 • 2016-09-23 15:34 • 来自相关话题

    QQ五笔截图未命名.png


    前天微信公众号的“小程序”新闻刷遍天的同时,没有多少人关注到这样的一个新闻。










    百度要把这个曾经的宝贝-91助手卖了!

    一时间还多创业者(还在整日整夜开发特色APP)开始担心APP被淘汰,身边那些做APP开发的程序猿也开始担心自己的锦绣前程被横扫。其实据经验非常多的前辈们分析,这些担忧都不是必要的,小程序的出现,它的竞争对手不是APP,而是全球的平台市场。对于平台或者产品型企业来说,是一个很好的机遇,因为新的平台降临,大家又回到同一条起跑线上了。草根们会和巨头获得接近平等的机会。

    面对这筹谋已久又突如其来的变化,我仿佛看到了好多对正在迷茫的人们的红利来到了!

    第一:如果小程序到来,腾讯控股的股票即将面临一大波的涨势!








    QQ五笔截图未命名.png








    QQ五笔截图未命名.png


    这两幅图的数据分别是三个月前和现在的行情数据,涨幅已经超过20%

    腾讯9年来的财报数据

    2007年

    总收入为人民币38.209亿元(5.231亿美元 ),比去年同期增长36.4%。

    2008年

    腾讯公布的财报显示,2008年腾讯总收入为人民币71.545亿元(约合10.468亿美元),比去年同期增长87.2%。

    2009年

    总收入为人民币124.400亿元(18.219亿美元),比去年同期增长73.9%。

    2010年

    总收入为人民币196.460亿元(29.665亿美元1 ) ,比去年同期增长57.9%。

    2011年

    总收入为人民币284.961亿元(45.225亿美元)比去年同期增长45.0%。

    2012年

    总收入为人民币438.937亿元(69.833亿美元1 ),比去年同期增长54.0%。

    2013年

    腾讯2013年总收入为人民币604.37亿元(约99.13亿美元),比去年同期增长38%

    2014年

    总收入为人民币789.32亿元(128.99亿美元 ),比去年同期增长31%。

    2015年

    腾讯全年收入1028.63亿,同比增长33%。

    2016年

    2016年Q1财报:总营收319.95亿元,同比增43%

    2016年Q2财报,总营收为人民币356.91亿元,同比增长52%。

    (数据取自庞门正道的统计)

    过百亿营收的前提下,每年平均不低于40%的营收增长,这个是什么节奏?是一个中小型公司的营收攀升速度,只有基数非常小的数字才可以做到这样的提升节奏。

    如果微信此举成功,年底股票突破260估计不是什么大问题,股民的福利来了,赶紧入手吧!那么问题来了,不能买港股怎么破?

    第二:零基础,针对小程序培训速成班是否会应运而生?







    QQ五笔截图未命名.png


    以来的几年来,安卓,IOS,UI,大数据,云计算,前端等等的针对性速成培训层出不穷,今天这一个小程序的诞生,将会给更多的培训机构带来新的分支和挑战,也会给更多对互联网有兴趣的小白带来新一轮的入门机遇。因为新的改变让大家又开始重新站在同一起跑线上。

    第三:企业开发成本有大影响?







    2013102804


    某互联网创始人觉得开发和推广app对草根(负担)太重,张小龙可能在探求一种轻量级的idea简易爆发的可能性。找同行网CEO刘宇波也认为,“长远看,其实是进一步降低开发门槛和成本。”

    第四:前端需求近段时间会猛涨?







    QQ五笔截图未命名.png

    这可能是草根程序员的春天,短时间会让前端再火一把。也许经过一段时间,市场对h5程序员的需求会降低。因为工具的进步,以前3个人要做的事情,现在1个人就够了。不合格的程序员被更先进的开发工具淘汰,是必然的趋势。

    以上仅出于个人观点,不喜勿喷,谢谢! 查看全部







    QQ五笔截图未命名.png


    前天微信公众号的“小程序”新闻刷遍天的同时,没有多少人关注到这样的一个新闻。










    百度要把这个曾经的宝贝-91助手卖了!

    一时间还多创业者(还在整日整夜开发特色APP)开始担心APP被淘汰,身边那些做APP开发的程序猿也开始担心自己的锦绣前程被横扫。其实据经验非常多的前辈们分析,这些担忧都不是必要的,小程序的出现,它的竞争对手不是APP,而是全球的平台市场。对于平台或者产品型企业来说,是一个很好的机遇,因为新的平台降临,大家又回到同一条起跑线上了。草根们会和巨头获得接近平等的机会。

    面对这筹谋已久又突如其来的变化,我仿佛看到了好多对正在迷茫的人们的红利来到了!

    第一:如果小程序到来,腾讯控股的股票即将面临一大波的涨势!








    QQ五笔截图未命名.png








    QQ五笔截图未命名.png


    这两幅图的数据分别是三个月前和现在的行情数据,涨幅已经超过20%

    腾讯9年来的财报数据

    2007年

    总收入为人民币38.209亿元(5.231亿美元 ),比去年同期增长36.4%

    2008年

    腾讯公布的财报显示,2008年腾讯总收入为人民币71.545亿元(约合10.468亿美元),比去年同期增长87.2%

    2009年

    总收入为人民币124.400亿元(18.219亿美元),比去年同期增长73.9%

    2010年

    总收入为人民币196.460亿元(29.665亿美元1 ) ,比去年同期增长57.9%

    2011年

    总收入为人民币284.961亿元(45.225亿美元)比去年同期增长45.0%

    2012年

    总收入为人民币438.937亿元(69.833亿美元1 ),比去年同期增长54.0%

    2013年

    腾讯2013年总收入为人民币604.37亿元(约99.13亿美元),比去年同期增长38%

    2014年

    总收入为人民币789.32亿元(128.99亿美元 ),比去年同期增长31%

    2015年

    腾讯全年收入1028.63亿,同比增长33%

    2016年

    2016年Q1财报:总营收319.95亿元,同比增43%

    2016年Q2财报,总营收为人民币356.91亿元,同比增长52%

    (数据取自庞门正道的统计)

    过百亿营收的前提下,每年平均不低于40%的营收增长,这个是什么节奏?是一个中小型公司的营收攀升速度,只有基数非常小的数字才可以做到这样的提升节奏。

    如果微信此举成功,年底股票突破260估计不是什么大问题,股民的福利来了,赶紧入手吧!那么问题来了,不能买港股怎么破?

    第二:零基础,针对小程序培训速成班是否会应运而生?







    QQ五笔截图未命名.png


    以来的几年来,安卓,IOS,UI,大数据,云计算,前端等等的针对性速成培训层出不穷,今天这一个小程序的诞生,将会给更多的培训机构带来新的分支和挑战,也会给更多对互联网有兴趣的小白带来新一轮的入门机遇。因为新的改变让大家又开始重新站在同一起跑线上。

    第三:企业开发成本有大影响?







    2013102804


    某互联网创始人觉得开发和推广app对草根(负担)太重,张小龙可能在探求一种轻量级的idea简易爆发的可能性。找同行网CEO刘宇波也认为,“长远看,其实是进一步降低开发门槛和成本。”

    第四:前端需求近段时间会猛涨?







    QQ五笔截图未命名.png

    这可能是草根程序员的春天,短时间会让前端再火一把。也许经过一段时间,市场对h5程序员的需求会降低。因为工具的进步,以前3个人要做的事情,现在1个人就够了。不合格的程序员被更先进的开发工具淘汰,是必然的趋势。

    以上仅出于个人观点,不喜勿喷,谢谢!


    揭秘:小程序后台长这样

    小程序假装是运营 发表了文章 • 0 个评论 • 7743 次浏览 • 2016-09-24 01:21 • 来自相关话题

    前言:笔者(这个自称是不是有点老套?)所在的项目,第一时间接到了微信小程序的内测邀请,经历了效率极高的身份验证,我们终于得见小应用的后台。经过体验和分析,这里简单做个分享,希望看了的童鞋都能走上人生巅峰。
    [h1]后台长啥样?[/h1]既然题目都起成了这样,不截个图觉得自己走不脱。






    小程序后台首页(内测版)
    很可能看了这个后台,你还是懵逼的,所以这里整理了几个要点,拿走去吹逼,不谢。
    [h2]审核制[/h2]所有的小程序版本更新,都需在后台提交审核,微信会根据相应规范决定是否通过。一夜回到等应用市场上线的既视感对么?不过也能理解,相当于你在别人家做客,看看主人的脸色吃饭,也是应该的。
    [h2]加速度[/h2]大家都知道,在微信服务号里面打开一个h5页面是什么感受,经常会觉得慢对不对,我相信这是各个产品的痛,直接影响转化率哪。







    产品正经脸科普,6~8s是用户等待极限
    而在小程序上,数据仍由自己的服务器控制,前端代码在微信上,相当于微信通过自己的代码编译,去实现页面体验的优化,我相信官方宣称的“不亚于原生应用的流畅体验”未必真实(基于浏览器的开发,天生就被限制了三分之一的能力),但也不会差的过远。
    [h2]
    入口

    [/h2]近日,网传小程序内测版视频,指明入口为发现页的最底部操作栏。






    网传视频截图
    公众号入口在通讯录,这个页面展示的都是你沉淀下来的关系,希望可以反复查看,进行交互的一些内容,操作较为高频。
    如果小程序的入口真的在发现页,并且要符合张小龙所说的“用完即走”,那么大胆猜测,所有的小程序在你进行交互以后,仍旧不会在出现在微信首页。相关的订单等关键信息,都会以微信通知的形式出现,进一步营销及深度触及用户的可能是被降低了许多的。

    更屌的接口
    已经看到有放出微信的开发者文档,这里贴链接给大家。

    https://mp.weixin.qq.com/wiki/

    从用户设备到手机的一些基础能力,接口都有提供。

    要听微信交互设计师的话
    前面有提到小程序的审核制,预测审核的不光是程序的可用性(你以为代码到处都是bug会给你过?),界面的美观和易用也是需要考虑在内的。所以,我们看到微信的交互设计师,洋洋洒洒写了这么多内容,也是挺心疼的。
    平心而论,文档都是以用户为核心的交互内容,要求很低,低到只要是一个刚入行的交互设计师,都会这这样设计,低到我有些怀疑,以后微信小程序的门槛到底会放得多低。。。






    设计规范截图
    300W买个内测资格?别闹了小程序的适用场景
    小程序的审核制决定了它不会像公众号一样,用户随时可见最新的内容,这就要求我们的业务最好是精简的,稳定的。
    小程序的入口决定了用户使用他时候的心态,往往是已经产生了某种需求或者冲动,要用服务来满足,所以这应该是提供服务,聚焦结果的一个工具。
    由于产生的需求的长尾特性,小程序很可能不能和用户深度交流,对于品牌溢价很高的业务,可能并不合适。
    总结下,业务稳定+提供服务+长尾+对品牌宣传没有太多要求的业务,可能更适合小程序。
    再大胆点看,是不是以后同质化的业务都可以打包成一个小程序,用户只用关心在这个小程序里得到自己想要的结果,而不用关心服务商是谁。
    小程序+服务号,可能是一套组合拳
    对于已经采用服务号开展业务的童鞋,小程序很可能是一个用户来源的渠道,用户有可能通过搜索相应关键词找到业务,形成交易。并且这部分用户的需求可能较为精准且强烈,满足他们的方式,应该是简单,直接地提供服务,然后恭送用户。






    这是小程序

    而服务号,一定是一个和用户进行深度沟通,提供高频及常规服务的地方。






    这是公众号

    最后地最后,想说一句
    别着急,有时候,选择做不做比怎么做更重要
    ps,下一次有机会,可能想写一写《有了app,为何你还要做公众号》,谈谈app和公众号的相爱相杀,如果感兴趣,点赞吧。各位周末愉快!!! 查看全部

    前言:笔者(这个自称是不是有点老套?)所在的项目,第一时间接到了微信小程序的内测邀请,经历了效率极高的身份验证,我们终于得见小应用的后台。经过体验和分析,这里简单做个分享,希望看了的童鞋都能走上人生巅峰。
    [h1]后台长啥样?[/h1]既然题目都起成了这样,不截个图觉得自己走不脱。






    小程序后台首页(内测版)
    很可能看了这个后台,你还是懵逼的,所以这里整理了几个要点,拿走去吹逼,不谢。
    [h2]审核制[/h2]所有的小程序版本更新,都需在后台提交审核,微信会根据相应规范决定是否通过。一夜回到等应用市场上线的既视感对么?不过也能理解,相当于你在别人家做客,看看主人的脸色吃饭,也是应该的。
    [h2]加速度[/h2]大家都知道,在微信服务号里面打开一个h5页面是什么感受,经常会觉得慢对不对,我相信这是各个产品的痛,直接影响转化率哪。







    产品正经脸科普,6~8s是用户等待极限
    而在小程序上,数据仍由自己的服务器控制,前端代码在微信上,相当于微信通过自己的代码编译,去实现页面体验的优化,我相信官方宣称的“不亚于原生应用的流畅体验”未必真实(基于浏览器的开发,天生就被限制了三分之一的能力),但也不会差的过远。
    [h2]
    入口

    [/h2]近日,网传小程序内测版视频,指明入口为发现页的最底部操作栏。






    网传视频截图
    公众号入口在通讯录,这个页面展示的都是你沉淀下来的关系,希望可以反复查看,进行交互的一些内容,操作较为高频。
    如果小程序的入口真的在发现页,并且要符合张小龙所说的“用完即走”,那么大胆猜测,所有的小程序在你进行交互以后,仍旧不会在出现在微信首页。相关的订单等关键信息,都会以微信通知的形式出现,进一步营销及深度触及用户的可能是被降低了许多的。

    更屌的接口
    已经看到有放出微信的开发者文档,这里贴链接给大家。

    https://mp.weixin.qq.com/wiki/

    从用户设备到手机的一些基础能力,接口都有提供。

    要听微信交互设计师的话
    前面有提到小程序的审核制,预测审核的不光是程序的可用性(你以为代码到处都是bug会给你过?),界面的美观和易用也是需要考虑在内的。所以,我们看到微信的交互设计师,洋洋洒洒写了这么多内容,也是挺心疼的。
    平心而论,文档都是以用户为核心的交互内容,要求很低,低到只要是一个刚入行的交互设计师,都会这这样设计,低到我有些怀疑,以后微信小程序的门槛到底会放得多低。。。






    设计规范截图
    300W买个内测资格?别闹了小程序的适用场景
    小程序的审核制决定了它不会像公众号一样,用户随时可见最新的内容,这就要求我们的业务最好是精简的,稳定的。
    小程序的入口决定了用户使用他时候的心态,往往是已经产生了某种需求或者冲动,要用服务来满足,所以这应该是提供服务,聚焦结果的一个工具。
    由于产生的需求的长尾特性,小程序很可能不能和用户深度交流,对于品牌溢价很高的业务,可能并不合适。
    总结下,业务稳定+提供服务+长尾+对品牌宣传没有太多要求的业务,可能更适合小程序。
    再大胆点看,是不是以后同质化的业务都可以打包成一个小程序,用户只用关心在这个小程序里得到自己想要的结果,而不用关心服务商是谁。
    小程序+服务号,可能是一套组合拳
    对于已经采用服务号开展业务的童鞋,小程序很可能是一个用户来源的渠道,用户有可能通过搜索相应关键词找到业务,形成交易。并且这部分用户的需求可能较为精准且强烈,满足他们的方式,应该是简单,直接地提供服务,然后恭送用户。






    这是小程序

    而服务号,一定是一个和用户进行深度沟通,提供高频及常规服务的地方。






    这是公众号

    最后地最后,想说一句
    别着急,有时候,选择做不做比怎么做更重要
    ps,下一次有机会,可能想写一写《有了app,为何你还要做公众号》,谈谈app和公众号的相爱相杀,如果感兴趣,点赞吧。各位周末愉快!!!

    开发微信“小程序”必学教程

    前端实验楼 发表了文章 • 0 个评论 • 7436 次浏览 • 2016-09-22 17:19 • 来自相关话题

    今天,大家是不是都被这张图刷屏了:







    微信小程序

    这让程序员High了,特别是前端程序员High了!毕竟HTML5方面,缺人啊……不过,现在学还来得及!!

    所以啊,实验楼给大家准备好了教程,有HTML/CSS/JS,带你从基础到实战项目……

    今天,我们都想学前端!!!

    1、HTML基础入门

    带你从最最基础的知识开始,认识 HTML,通过 HTML 文件的结构、常用的标签、元素、属性、样式、超文本等内容让大家对 HTML 有一个完整的认识!

    2、HTML5基础入门

    HTML5有很多新特性,这个教程就带你入门了解HTML5的一些新特性。

    我们知道啊:


    html是结构 (网页一个架子,显示内容)、css是样式(添加背景图片,边框等来修饰)、js是行为(用户操作,华丽的动画)


    所以呢,光学HTML肯定是不够滴,还需要学习css和js才行啊。

    3、CSS速成教程

    这个教程啊,就是带你入门学习CSS知识的,让你对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

    4、Javascript基础

    这个教程呢,是教你学习 JavaScript 的语法及事件、对象、DOM 等基础知识,可以让网页按照你的想法“动”起来。

    以上呢,是基础,基础打牢了才能动手开发呀,但是,光有理论基础是不够的,还需要在实际开发“小程序”之前,做一些项目,练练手,把所学到的基础知识加以运用!

    5、HTML5两步实现拼图游戏

    这个项目就是教你使用HTML5和css3实现的九宫格拼图游戏。做出来是这样的:



    HTML5两步实现拼图游戏

    6、SCSS(SASS)画小黄人

    这个项目呢,教你通过 SCSS(SASS)画一个会眨眼睛的小黄人,主要学习 CSS3。画出来是这样的:



    画小黄人

    7、JavaScript实现玫瑰花

    这个项目呢,主要是教你用JavaScript语言实现一朵漂亮的玫瑰花。实现出来是这样的:







    玫瑰花

    ps.其实这个玫瑰花是会动的,慢慢开放,但是不知为啥传上来就不动了……

    嗯,带你入门前端的教程,也整理好了,剩下的就是你自己去学习了。当然,实验楼上还有很多前端教程,可以找自己感兴趣的去学习。

    最后,大家发家致富了之后,不要忘记我啊,我啊,我啊~~~,毕竟我辛苦总结了教程…… 查看全部

    今天,大家是不是都被这张图刷屏了:







    微信小程序

    这让程序员High了,特别是前端程序员High了!毕竟HTML5方面,缺人啊……不过,现在学还来得及!!

    所以啊,实验楼给大家准备好了教程,有HTML/CSS/JS,带你从基础到实战项目……

    今天,我们都想学前端!!!

    1、HTML基础入门

    带你从最最基础的知识开始,认识 HTML,通过 HTML 文件的结构、常用的标签、元素、属性、样式、超文本等内容让大家对 HTML 有一个完整的认识!

    2、HTML5基础入门

    HTML5有很多新特性,这个教程就带你入门了解HTML5的一些新特性。

    我们知道啊:


    html是结构 (网页一个架子,显示内容)、css是样式(添加背景图片,边框等来修饰)、js是行为(用户操作,华丽的动画)


    所以呢,光学HTML肯定是不够滴,还需要学习css和js才行啊。

    3、CSS速成教程

    这个教程啊,就是带你入门学习CSS知识的,让你对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

    4、Javascript基础

    这个教程呢,是教你学习 JavaScript 的语法及事件、对象、DOM 等基础知识,可以让网页按照你的想法“动”起来。

    以上呢,是基础,基础打牢了才能动手开发呀,但是,光有理论基础是不够的,还需要在实际开发“小程序”之前,做一些项目,练练手,把所学到的基础知识加以运用!

    5、HTML5两步实现拼图游戏

    这个项目就是教你使用HTML5和css3实现的九宫格拼图游戏。做出来是这样的:



    HTML5两步实现拼图游戏

    6、SCSS(SASS)画小黄人

    这个项目呢,教你通过 SCSS(SASS)画一个会眨眼睛的小黄人,主要学习 CSS3。画出来是这样的:



    画小黄人

    7、JavaScript实现玫瑰花

    这个项目呢,主要是教你用JavaScript语言实现一朵漂亮的玫瑰花。实现出来是这样的:







    玫瑰花

    ps.其实这个玫瑰花是会动的,慢慢开放,但是不知为啥传上来就不动了……

    嗯,带你入门前端的教程,也整理好了,剩下的就是你自己去学习了。当然,实验楼上还有很多前端教程,可以找自己感兴趣的去学习。

    最后,大家发家致富了之后,不要忘记我啊,我啊,我啊~~~,毕竟我辛苦总结了教程……


    微信小程序开发API调研

    日记本lvsheng 发表了文章 • 0 个评论 • 949 次浏览 • 2016-09-25 02:37 • 来自相关话题

    微信小程序在周六晚上终于正式放出了开发文档,

    虽然没有内测账号无法在公众平台上内测,

    但根据开发文档以及开发工具的模拟器也终于可以探一下庐山真面目了~

    根据之前参与的一个尝试用web技术编程NativeUI项目的一些经验及遇到的问题,

    对微信小程序参照开发文档及模拟器中的一些尝试,总结下看到的一些特性吧

    整个小程序应用由多个Page(页面)组成,先从Page开始:

    [h2]Page[/h2]
    分为两层:视图层(WXML(HTML变体) + WXSS(CSS变体)) + 逻辑层(跑在JsCore里的JavaScript)除canvas外,逻辑层无任何直接操作视图层的API,仅通过 模板+“数据绑定” 来控制视图层[h2]模板[/h2]模板功能类“HTML”的标签语言来描述视图类似vue、angular等,通过“指令”强化模板提供双大括号(Mustache)风格的“数据绑定”组织管理提供了具有独立作用域的template来定义模板片断以供其他处的模板使用WXML文件中可以引入其他WXML文件其中模板功能方面具体来看:[h3]标签指令[/h3]仅提供了'循环'与'条件'两种控制结构的指令:wx:for、wx:if、wx:elif、wx:else[h3]“数据绑定”[/h3]所有逻辑层对视图层的控制均仅通过“数据绑定”完成,包括动画所有数据绑定均包裹在双大括号(Mustache)即{{ }}中支持在文本、也支持在属性值中使用。另外条件、循环指令中表达式也需由双大括号包裹数据绑定为单向绑定模板可使用逻辑层通过接口指定的数据初始化时传入的数据对象,在初始化结束之后便再与视图层无任何关联即改变原数据对象上的属性也并始终不会更新至视图层更新数据需要显式地调用setData接口更新为局部更新,即本次未设置的数据值则沿用旧有值不改变视图层的处理应该是完全在native端(而非js端)完成,因此数据对象也未与js环境共享、需要手动调用接口设置才能更新支持部分简单表达式支持算数表达式、关系表达式、字符串连接表达式、三元表达式不能如angular、vue中支持函数/方法调用用户输入的收集/获取:未提供类似angular、vue中的双向数据绑定,而是类似react的方式仅通过事件对象接收用户输入此外相比其他类似的模板增强方案还增加了比较便捷的数据重组功能:可以在双大括号(Mustache)中将逻辑层提供的数据进行重组,构成新的数组或对象以方便使用[h2]样式[/h2]支持页面级及应用级的WXSS文件通过选择器指明样式,也支持元素内联style属性进行更高优先级的覆盖猜测布局渲染同样基于facebook的css-layout,以提供flex为主的布局但在css-layout提供的flex布局基础之上,结合native的文字排版提供了支持折行/多行的行内环境,从而支持了display: inline、display: inline-block,如下图:行内环境排版示例此外,小程序框架对样式非布局方面的处理应还有(css-layout中均未提供):代理某些native元素的属性设置(如TextView的color),并额外提供了边框与背景的绘制(如同@袁炜之前在o2o框架项目中所做)、子元素对父元素的样式继承等圆角支持同样仅在于绘制,而不会对子元素进行截断选择器方面只支持element、class、id及逗号选择器目前不支持后代等选择器,这样应该很大程度地减少了复杂度及性能消耗另外竟然额外支持了::before与::after两个伪元素选择器[h2]事件[/h2]逻辑层到视图层的控制完全通过“数据绑定”,视图层至逻辑层的反馈则仅有视图元素的事件(没有任何类似DOM的对象模型/接口)通过标签属性的方式在WXML中注册事件回调方法支持事件冒泡,即模拟了HTML中事件的冒泡阶段、但未模拟事件捕获阶段而是否阻止继续冒泡,必须在监听时就要确定通过bindxx为不截获冒泡,而通过catchxx为截获原因应是事件的派发也完全由native侧完成,故无法如web一样在js对事件处理的过程中设置是否阻止[h2]视图组件[/h2]印象比较深刻:组件相当地全面。看上去似乎是做了充分的准备、也相当地重视、真的预备要用小程序掀起一场波澜最基本的,封装了native中各常用组件,如View、Text、Image、Toast、ScrollView等并且提供了一些抽象层次更高的业务组件,像swiper(轮播组件)、progress(进度条)、icon(图标)、loading、navigator等表单方面,模拟了web下几乎所有的表单元素:form、input(支持text, number, idcard, digit, time, date)、checkbox、radio、button、label(同样具有代理焦点的功能)并提供了接口更友好的checkbox-group、radio-group、更适合移动场景的picker(列表选择器 支持普通列表,时间选择器,日期选择器)、slider(滚动选择器)、switch(开关)、action-sheet(上拉菜单)此外还提供了地图(虽然现在看还略微不是很完善,比如地图上自定义覆盖物的设置并不支持动态更新)并且~ 提供了完整API的canvas!从能力或说可能性上使开发者具备了任意绘制界面的可能性稍微想像一下:cocos2d-x基于h5 canvas的js版,应该不费很大周张就可以移植到微信小程序的canvas上~ 届时也许就可以使用cocos2d在微信小程序上开发游戏了[h2]本地能力[/h2]同视图组件一样,也很全面。网络上:支持https请求,并支持WebSocket媒体能力:相册、音视频播放与录制位置及移动速度信息(以后滴滴的微信版是不是会好用很多~)缓存文件读写、本地文件保存、设备信息、传感器监听、界面相关、以及微信开放的登录、支持、消息等接口等[h2]概览/框架[/h2]补充一下将Page(页面)组织成完整的小程序应用:通过约定的目录结构来放置配置、页面JS、WXML、WXSS等文件通过配置来指明应用的基本信息核心配置为构成应用的各个页面(Page)的路径第一个页面被用作应用的首页,此后可通过API接口与navigator组件进行页面跳转此外还可配置其他如窗口、导航栏、底部多Tab内容等另外应用及各页面的生命周期中各节点均有提供回调,可分别在应用及各页面主js中注册时指明[h2]其他[/h2]开发工具基于chrome调试工具改造,又与小程序本身有很好结合,非常好用js支持CommonJS模块化元素支持data-开头的自定义属性,值可以在事件发生时随事件对象一同传递至回调方法中这样虽然没有DOM接口,却可以在事件处理时获取到视图相关的额外信息表单元素的change等事件、touch系列各事件、tap、longtap事件也全面支持[h1]附:[/h1][h2]官方文档及资料[/h2]09月23号在“微信公众平台”正式放出“公众平台小程序文档和工具”的公告开发文档:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1474644082912quickstart程序源码包:https://mp.weixin.qq.com/debug/wxadoc/dev/demo/quickstart.zipdemo程序(能力展示):https://mp.weixin.qq.com/debug/wxadoc/dev/demo.html源码包:https://mp.weixin.qq.com/debug/wxadoc/dev/demo/demo.zip微信公众平台 · 小程序文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1474632113_xQVCl&token=&lang=zh_CN(目前似乎需复制链接再粘贴至地址栏访问,不支持直接点击的带refer访问)[h2]体验[/h2]目前只有内测开发者才能在微信公众后台操作、并在手机体验(需6.3.27以上版本微信,目前似乎android还未发布该版本)非内测开发者只能在pc/mac的模拟器里预览官网平台页面下载链接目前被翻页键挡住了。。。这里列一下:windows 32位windows 64位mac[h2]开发文档:[/h2]官方文档速查表简易教程框架组件API页面WXML列表渲染条件渲染数据绑定WXSS事件本地能力 查看全部

    微信小程序在周六晚上终于正式放出了开发文档,

    虽然没有内测账号无法在公众平台上内测,

    但根据开发文档以及开发工具的模拟器也终于可以探一下庐山真面目了~

    根据之前参与的一个尝试用web技术编程NativeUI项目的一些经验及遇到的问题,

    对微信小程序参照开发文档及模拟器中的一些尝试,总结下看到的一些特性吧

    整个小程序应用由多个
    Page
    (页面)组成,先从
    Page
    开始:

    [h2]
    Page
    [/h2]
    • 分为两层:视图层(
      WXML
      (
      HTML
      变体) +
      WXSS
      (
      CSS
      变体)) + 逻辑层(跑在
      JsCore
      里的
      JavaScript
      )
    • canvas外,逻辑层无任何直接操作视图层的API,仅通过 模板+“数据绑定” 来控制视图层
    [h2]模板[/h2]
    • 模板功能
        类“HTML”的标签语言来描述视图
      • 类似vue、angular等,通过“指令”强化模板
      • 提供双大括号(
        Mustache
        )风格的“数据绑定”
    • 组织管理
        提供了具有独立作用域的template来定义模板片断以供其他处的模板使用
      • WXML
        文件中可以引入其他
        WXML
        文件
    其中模板功能方面具体来看:[h3]标签指令[/h3]
    • 仅提供了'循环'与'条件'两种控制结构的指令:
        wx:for
        wx:if
        wx:elif
        wx:else
    [h3]“数据绑定”[/h3]
    • 所有逻辑层对视图层的控制均仅通过“数据绑定”完成,包括动画
    • 所有数据绑定均包裹在双大括号(
      Mustache
      )即{{ }}中
        支持在文本、也支持在属性值中使用。另外条件、循环指令中表达式也需由双大括号包裹
    • 数据绑定为单向绑定
        模板可使用逻辑层通过接口指定的数据
          初始化时传入的数据对象,在初始化结束之后便再与视图层无任何关联
            改变原数据对象上的属性也并始终不会更新至视图层
        • 更新数据需要显式地调用
          setData
          接口
            更新为局部更新,即本次未设置的数据值则沿用旧有值不改变
        • 视图层的处理应该是完全在
          native
          端(而非js端)完成,因此数据对象也未与js环境共享、需要手动调用接口设置才能更新
      • 支持部分简单表达式
          支持算数表达式、关系表达式、字符串连接表达式、三元表达式
        • 不能如angular、vue中支持函数/方法调用
    • 用户输入的收集/获取:
        未提供类似angular、vue中的双向数据绑定,而是类似react的方式仅通过事件对象接收用户输入
    • 此外相比其他类似的模板增强方案还增加了比较便捷的数据重组功能:
        可以在双大括号(
        Mustache
        )中将逻辑层提供的数据进行重组,构成新的数组或对象以方便使用
    [h2]样式[/h2]
    • 支持页面级及应用级的
      WXSS
      文件通过选择器指明样式,也支持元素内联
      style
      属性进行更高优先级的覆盖
    • 猜测布局渲染同样基于facebook的css-layout,以提供
      flex
      为主的布局
        但在
        css-layout
        提供的flex布局基础之上,结合native的文字排版提供了支持折行/多行的行内环境,从而支持了
        display: inline
        display: inline-block
        ,如下图:行内环境排版示例
      • 此外,小程序框架对样式非布局方面的处理应还有(css-layout中均未提供):代理某些native元素的属性设置(如
        TextView
        color
        ),并额外提供了边框与背景的绘制(如同@袁炜之前在o2o框架项目中所做)、子元素对父元素的样式继承等
          圆角支持同样仅在于绘制,而不会对子元素进行截断
    • 选择器方面
        只支持
        element
        class
        id
        及逗号选择器
      • 目前不支持后代等选择器,这样应该很大程度地减少了复杂度及性能消耗
      • 另外竟然额外支持了
        ::before
        ::after
        两个伪元素选择器
    [h2]事件[/h2]逻辑层到视图层的控制完全通过“数据绑定”,视图层至逻辑层的反馈则仅有视图元素的事件(没有任何类似
    DOM
    的对象模型/接口)
    • 通过标签属性的方式在
      WXML
      中注册事件回调方法
    • 支持事件冒泡,即模拟了
      HTML
      中事件的冒泡阶段、但未模拟事件捕获阶段
    • 是否阻止继续冒泡,必须在监听时就要确定
        通过
        bindxx
        为不截获冒泡,而通过
        catchxx
        为截获
      • 原因应是事件的派发也完全由native侧完成,故无法如web一样在js对事件处理的过程中设置是否阻止
    [h2]视图组件[/h2]印象比较深刻:组件相当地全面。看上去似乎是做了充分的准备、也相当地重视、真的预备要用小程序掀起一场波澜
    • 最基本的,封装了native中各常用组件,如
      View
      Text
      Image
      Toast
      ScrollView
    • 并且提供了一些抽象层次更高的业务组件,像
      swiper
      (轮播组件)、
      progress
      (进度条)、
      icon
      (图标)、
      loading
      navigator
    • 表单方面,模拟了web下几乎所有的表单元素:
      form
      input
      (支持
      text
      ,
      number
      ,
      idcard
      ,
      digit
      ,
      time
      ,
      date
      )、
      checkbox
      radio
      button
      label
      (同样具有代理焦点的功能)
    • 并提供了接口更友好的
      checkbox-group
      radio-group
      、更适合移动场景的
      picker
      (列表选择器 支持普通列表,时间选择器,日期选择器)、
      slider
      (滚动选择器)、
      switch
      (开关)、
      action-sheet
      (上拉菜单)
    • 此外还提供了地图(虽然现在看还略微不是很完善,比如地图上自定义覆盖物的设置并不支持动态更新)
    • 并且~ 提供了完整API的canvas!从能力或说可能性上使开发者具备了任意绘制界面的可能性
      稍微想像一下:cocos2d-x基于h5 canvas的js版,应该不费很大周张就可以移植到微信小程序的canvas上~ 届时也许就可以使用cocos2d在微信小程序上开发游戏了[h2]本地能力[/h2]同视图组件一样,也很全面。
      • 网络上:支持https请求,并支持
        WebSocket
      • 媒体能力:相册、音视频播放与录制
      • 位置及移动速度信息(以后滴滴的微信版是不是会好用很多~)
      • 缓存文件读写、本地文件保存、设备信息、传感器监听、界面相关、以及微信开放的登录、支持、消息等接口等
      [h2]概览/框架[/h2]补充一下将
      Page
      (页面)组织成完整的小程序应用:
      • 通过约定的目录结构来放置配置、页面
        JS
        WXML
        WXSS
        等文件
      • 通过配置来指明应用的基本信息
          核心配置为构成应用的各个页面(
          Page
          )
          的路径
            第一个页面被用作应用的首页,此后可通过API接口与
            navigator
            组件进行页面跳转
        • 此外还可配置其他如窗口、导航栏、底部多Tab内容等
      • 另外应用及各页面的生命周期中各节点均有提供回调,可分别在应用及各页面主js中注册时指明
      [h2]其他[/h2]
      • 开发工具基于chrome调试工具改造,又与小程序本身有很好结合,非常好用
      • js支持CommonJS模块化
      • 元素支持
        data-
        开头的自定义属性,值可以在事件发生时随事件对象一同传递至回调方法中
          这样虽然没有
          DOM
          接口,却可以在事件处理时获取到视图相关的额外信息
      • 表单元素的
        change
        等事件、
        touch
        系列各事件、
        tap
        longtap
        事件也全面支持
      [h1]附:[/h1][h2]官方文档及资料[/h2]09月23号在“微信公众平台”正式放出“公众平台小程序文档和工具”的公告[h2]体验[/h2]
      • 目前只有内测开发者才能在微信公众后台操作、并在手机体验(需6.3.27以上版本微信,目前似乎android还未发布该版本)
      • 非内测开发者只能在pc/mac的模拟器里预览
      [h2]开发文档:[/h2]

      微信小程序开发:MINA

      微信姜家志 发表了文章 • 0 个评论 • 13996 次浏览 • 2016-09-25 09:55 • 来自相关话题

      MINA是微信开发小程序的框架:


      MINA的目标是通过尽可能简单,高效的方式让开发者可以在微信中开发具有原生APP体验的服务。


      运行MINA的项目必须要有微信web开发者工具和微信小程序的AppID,因为现在还处于内测阶段的原因,因此大部分数人还没有AppID,还好有大神已经破解了IDE,可以先体验下,详情请参考微信小程序开发资料收集

      MINA框架中有四种类型的文件:

      .js文件 基于JavaScript的逻辑层框架.wxml 视图层文件,是MINA设计的一套标签语言.wxss 样式文件,用于描述WXML的组件样式.json 文件,配置文件,用于单个页面的配置和整个项目的配置目录结构为了减少配置项,小程序中一个页面中的四个文件必须要有相同的路径和文件名,使用微信web开发者工具新建一个项目,可以看到他的目录结构是这样的:目录结构其中app.js是程序的入口,app.json是项目的配置文件,app.wxss是全局配置的样式文件,logs和index文件夹是是单个页面的文件,utils用来存放常用的工具类文件夹。[h1]app.js[/h1]app.js使用App()函数注册一个小程序,可以指定小程序的生命周期小程序的App()生命周期中三个事件可以监听:onLaunch,onShow,onHide。onLaunch:小程序加载完成之后调用,全局只触发一次onShow: 小程序启动,或者从后台到前台会触发一次onHide:小程序从前台到后台会触发一次例如:App({ onLaunch: function () { console.log('App Launch') }, onShow: function () { console.log('App Show') }, onHide: function () { console.log('App Hide') }, globalData: { hasLogin: false }})其中app.js的globalData可以设置全局的变量,在一个页面中可以通过getApp()函数获取小程序的实例,使用App的getCurrentPage()可以获取到当前页面的实例。[h1]app.json[/h1]app.json是小程序的全局配置包括:页面的路径,窗口表现,设置网络超时,开发模式等...页面配置pages:设置页面的路径 "pages":[ "pages/index/index", "pages/logs/logs" ]配置的index和logs两个页面的路径,在这里使用相对路径配置页面路径。窗口配置windows:用来配置状态栏的颜色,导航条的样式和颜色,标题,已经窗口的背景色:"window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#ffffff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }使用的Color为十六进制的颜色值,比如"#ffffff"注意:其中navigationBarTextStyle,导航栏的颜色仅支持black/white。而backgroundTextStyle,下拉背景的样式仅支持dark/light。tabBar: 设置tab应用,tabBar是一个数组,最少需要配置2个,最多能配置5个tab,tab按照数据的顺序排序:"tabBar":{ "color":"#dddddd", "selectdColor":"#3cc51f", "borderStyle":"black", "backgroundColor":"#ffffff" ,"list":[ { "pagePath":"pages/index/index", "iconPath":"image/wechat.png", "selectedIconPath":"image/wechatHL.png", "text":"主页" },{ "pagePath":"pages/logs/logs", "iconPath":"image/wechat.png", "selectedIconPath":"image/wechatHL.png", "text":"日志" }]}这里设置了两个tab页:index和log,效果如下:tabnetworkTimeout设置网络请求的超时时间,小程序有四种类型的网络请求[list=1]wx.request普通的http请求,配置为requestwx.connect stock链接,配置为connectSocketwx.uploadFile上传文件,配置为uploadFilewx.downloadFile下载文件,配置为downloadFile配置单位为毫秒,例如:"networkTimeout": { "request": 10000, "connectSocket": 10000, "uploadFile": 10000, "downloadFile": 10000 }debug:开发工具中开启debug模式,在控制台面板上可以看到调试信息,我们也可以使用console.log('onLoad')输入log帮助我们调试程序。"debug": true[h1]app.wxss[/h1]app.wxss中定义的的样式为全局样式,作用在每一个页面,在page中定义的.wxss文件为局部样式,只作用在局部,局部样式中的定义会覆盖app.wxss中定义的样式。样式的定义:.container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box;}其中200rpx中的rpx是reponslve pixel,可以根据屏幕的宽度进行自适应,在iPhone6上1rpx=0.5px=1物理像素。微信小程序建议设计以iPhone6为准样式的使用:<view class="container"></view>[h1]page[/h1]使用Page()函数来注册一个页面,为其指定页面的初始数据,生命周期函数,事件处理等。data 页面的初始数据,可以使用setData更新定义的数据onLoad 页面加载事件onReady 页面渲染完成onShow 页面显示onHide 页面隐藏onUnload 页面卸载
      例如:

      Page({
      data: {
      logs: []
      },
      onLoad: function () {
      this.setData({
      logs: (wx.getStorageSync('logs') || []).map(function (log) {
      return util.formatTime(new Date(log))
      })
      })
      }
      })

      page另外使用的文件.wxml是页面文件,使用定义好一套标签语言,.wxss是局部样式文件,.json局部配置文件比如需要在一个单独的页面中设置他的navigationBarTitleText,可以在.json文件中设置:

      {
      "navigationBarTitleText": "日志文件"
      }

      源代码地址:https://github.com/jjz/weixin-mina 查看全部

      MINA是微信开发小程序的框架:


      MINA的目标是通过尽可能简单,高效的方式让开发者可以在微信中开发具有原生APP体验的服务。


      运行MINA的项目必须要有
      微信web开发者工具
      微信小程序的AppID
      ,因为现在还处于内测阶段的原因,因此大部分数人还没有
      AppID
      ,还好有大神已经破解了IDE,可以先体验下,详情请参考微信小程序开发资料收集

      MINA框架中有四种类型的文件:

      • .js
        文件 基于JavaScript的逻辑层框架
      • .wxml
        视图层文件,是MINA设计的一套标签语言
      • .wxss
        样式文件,用于描述WXML的组件样式
      • .json
        文件,配置文件,用于单个页面的配置和整个项目的配置
      目录结构为了减少配置项,小程序中一个页面中的四个文件必须要有相同的路径和文件名,使用
      微信web开发者工具
      新建一个项目,可以看到他的目录结构是这样的:目录结构其中
      app.js
      是程序的入口,
      app.json
      是项目的配置文件,
      app.wxss
      是全局配置的样式文件,
      logs
      index
      文件夹是是单个页面的文件,
      utils
      用来存放常用的工具类文件夹。[h1]app.js[/h1]
      app.js
      使用
      App()
      函数注册一个小程序,可以指定小程序的生命周期小程序的
      App()
      生命周期中三个事件可以监听:
      onLaunch
      onShow
      onHide
      • onLaunch
        :小程序加载完成之后调用,全局只触发一次
      • onShow
        : 小程序启动,或者从后台到前台会触发一次
      • onHide
        :小程序从前台到后台会触发一次
      例如:
      App({  onLaunch: function () {     console.log('App Launch')  },  onShow: function () {    console.log('App Show')  },  onHide: function () {    console.log('App Hide')  },  globalData: {    hasLogin: false  }})
      其中
      app.js
      globalData
      可以设置全局的变量,在一个页面中可以通过
      getApp()
      函数获取小程序的实例,使用App的
      getCurrentPage()
      可以获取到当前页面的实例。[h1]app.json[/h1]
      app.json
      是小程序的全局配置包括:页面的路径,窗口表现,设置网络超时,开发模式等...
      • 页面配置
        pages
        :设置页面的路径
        "pages":[    "pages/index/index",    "pages/logs/logs"  ]
      配置的
      index
      logs
      两个页面的路径,在这里使用相对路径配置页面路径。
      • 窗口配置
        windows
        :用来配置状态栏的颜色,导航条的样式和颜色,标题,已经窗口的背景色:
      "window":{    "backgroundTextStyle":"light",    "navigationBarBackgroundColor": "#ffffff",    "navigationBarTitleText": "WeChat",    "navigationBarTextStyle":"black"  }
      使用的Color为十六进制的颜色值,比如"#ffffff"注意:其中
      navigationBarTextStyle
      ,导航栏的颜色仅支持
      black/white
      。而
      backgroundTextStyle
      ,下拉背景的样式仅支持
      dark/light
      • tabBar
        : 设置tab应用,
        tabBar
        是一个数组,最少需要配置2个,最多能配置5个tab,tab按照数据的顺序排序:
      "tabBar":{    "color":"#dddddd",    "selectdColor":"#3cc51f",    "borderStyle":"black",    "backgroundColor":"#ffffff"  ,"list":[    {      "pagePath":"pages/index/index",      "iconPath":"image/wechat.png",      "selectedIconPath":"image/wechatHL.png",      "text":"主页"      },{    "pagePath":"pages/logs/logs",    "iconPath":"image/wechat.png",    "selectedIconPath":"image/wechatHL.png",    "text":"日志"  }]}
      这里设置了两个tab页:
      index
      log
      ,效果如下:tab
      • networkTimeout
        设置网络请求的超时时间,小程序有四种类型的网络请求
      [list=1]
    • wx.request
      普通的http请求,配置为
      request
    • wx.connect
      stock链接,配置为
      connectSocket
    • wx.uploadFile
      上传文件,配置为
      uploadFile
    • wx.downloadFile
      下载文件,配置为
      downloadFile
      配置单位为毫秒,例如:
    • "networkTimeout": {    "request": 10000,    "connectSocket": 10000,    "uploadFile": 10000,    "downloadFile": 10000  }
      • debug
        :开发工具中开启debug模式,在控制台面板上可以看到调试信息,我们也可以使用
        console.log('onLoad')
        输入log帮助我们调试程序。
      "debug": true
      [h1]app.wxss[/h1]
      app.wxss
      中定义的的样式为全局样式,作用在每一个页面,在page中定义的
      .wxss
      文件为局部样式,只作用在局部,局部样式中的定义会覆盖
      app.wxss
      中定义的样式。样式的定义:
      .container {  height: 100%;  display: flex;  flex-direction: column;  align-items: center;  justify-content: space-between;  padding: 200rpx 0;  box-sizing: border-box;}
      其中
      200rpx
      中的
      rpx
      reponslve pixel
      ,可以根据屏幕的宽度进行自适应,在
      iPhone6
      1rpx=0.5px=1
      物理像素。微信小程序建议设计以
      iPhone6
      为准样式的使用:
      <view class="container"></view>
      [h1]page[/h1]使用Page()函数来注册一个页面,为其指定页面的初始数据,生命周期函数,事件处理等。
      • data
        页面的初始数据,可以使用setData更新定义的数据
      • onLoad
        页面加载事件
      • onReady
        页面渲染完成
      • onShow
        页面显示
      • onHide
        页面隐藏
      • onUnload
        页面卸载

      例如:

      Page({
      data: {
      logs: []
      },
      onLoad: function () {
      this.setData({
      logs: (wx.getStorageSync('logs') || []).map(function (log) {
      return util.formatTime(new Date(log))
      })
      })
      }
      })

      page另外使用的文件
      .wxml
      是页面文件,使用定义好一套标签语言,
      .wxss
      是局部样式文件,
      .json
      局部配置文件比如需要在一个单独的页面中设置他的
      navigationBarTitleText
      ,可以在
      .json
      文件中设置:

      {
      "navigationBarTitleText": "日志文件"
      }

      源代码地址:https://github.com/jjz/weixin-mina


      微信小程序开发:http请求

      微信姜家志 发表了文章 • 0 个评论 • 37357 次浏览 • 2016-09-25 19:38 • 来自相关话题

      在微信小程序进行网络通信,只能和指定的域名进行通信,微信小程序包括四种类型的网络请求。

      普通HTTPS请求(wx.request)上传文件(wx.uploadFile)下载文件(wx.downloadFile)WebSocket通信(wx.connectSocket)这里以介绍wx.request,wx.uploadFile,wx.dowloadFile三种网络请求为主[h1]设置域名[/h1]要微信小程序进行网络通信,必须先设置域名,不然会出现错误:URL 域名不合法,请在 mp 后台配置后重试需要在微信公众平台的小程序中设置域名。在微信小程序的设置界面可以看到设置选项:设置选择开发设置:开发设置可以看到服务器设置:服务器设置在这里可以设置对应四种网络访问的域名,每一种类型的网络请求需要设置一个域名,注意如果在这里设置域名为https://example.com/api/,那么https://example.com/api是无法调用的,必须加上后面/。[h1]http请求[/h1]使用wx.request可以发起一个http请求,一个微信小程序被限制为同时只有5个网络请求。function queryRequest(data){ wx.request({ url:"https://example.com/api/", data:data, header:{ // "Content-Type":"application/json" }, success:function(res){ console.log(res.data) }, fail:function(err){ console.log(err) } })}上面的代码会发送一个http get请求,然后打印出返回的结果。其中的参数也比较容易理解。url 服务器的url地址data 请求的参数可以采用String data:"xxx=xxx&xxx=xxx"的形式或者Object data:{"userId":1}的形式header 设置请求的headersuccess 接口成功的回调fail 接口失败的回调另外还有两个参数没有在代码里:method http的方法,默认为GET请求complete 调用接口结束之后的回调,无论成功或者失败该接口都会被调用[h1]上传文件[/h1]上传文件的api为wx.uploadFile,该api会发起一个http post请求,其中的Content-type为multipart/form-data。服务器端需要按照该Content-type类型接收文件,示例代码:function uploadFile(file,data) { wx.uploadFile({ url: 'http://example.com/upload', filePath: file, name: 'file', formData:data, success:function(res){ console.log(res.data) }, fail:function(err){ console.log(err) } }) }其中的url,header,success,fail以及complete和普通的http请求是一样的。这里有区别的参数是:name文件对应的key,服务器端需要通过name参数获取文件formData http请求中可以使用的其他参数[h1]下载文件[/h1]下载文件的api为wx.downloadFile,该api会发起一个http get请求,并在下载成功之后返回文件的临时路径,示例代码:function downloadFile(url,typ,success){ wx.downloadFile({ url:url, type:typ, success:function(res){ if(success){ success(res.tempFilePath) } }, fail:function(err){ console.log(err) } })}其中的url,header,fail,complete和wx.uploadFile的参数使用是一致的,其中有区别的参数是:type:下载资源的类型,用于客户端自动识别,可以使用的参数image/audio/videosuccess:下载成功之后的回调,以tempFilePath的参数返回文件的临时目录:res={tempFilePath:'文件路径'}下载成功后的是临时文件,只会在程序本次运行期间可以使用,如果需要持久的保存,需要调用方法wx.saveFile主动持久化文件,实例代码:function svaeFile(tempFile,success){ wx.saveFile({ tempFilePath:tempFile, success:function(res){ var svaedFile=res.savedFilePath if(success){ success(svaeFile) } } })}使用wx.saveFile保存临时文件到本地,提供给小程序下次启动时使用,其中的参数:tempFilePath 需要被保存文件的路径success 保存成功的回调,返回保存成功的路径,使用res.savedFilePath可以获取保存成功的路径fail 失败的回调complete结束的回调
      [h1]超时的设置[/h1]
      在微信小程序开发:MINA中已经提到了在app.js中设置networkTimeout可以设置四种类型网络访问的超时时间:

      "networkTimeout":{
      "request": 10000,
      "connectSocket": 10000,
      "uploadFile": 10000,
      "downloadFile": 10000
      }

      这里设置的超时时间对应着四种类型的网络请求。

      源代码请参考:https://github.com/jjz/weixin-mina/blob/master/api/api.js 查看全部

      在微信小程序进行网络通信,只能和指定的域名进行通信,微信小程序包括四种类型的网络请求。

      • 普通HTTPS请求(wx.request)
      • 上传文件(wx.uploadFile)
      • 下载文件(wx.downloadFile)
      • WebSocket通信(wx.connectSocket)
      这里以介绍
      wx.request
      ,
      wx.uploadFile
      ,
      wx.dowloadFile
      三种网络请求为主[h1]设置域名[/h1]要微信小程序进行网络通信,必须先设置域名,不然会出现错误:

      URL 域名不合法,请在 mp 后台配置后重试

      需要在微信公众平台的小程序中设置域名。在微信小程序的设置界面可以看到设置选项:设置选择
      开发设置
      开发设置可以看到服务器设置:服务器设置在这里可以设置对应四种网络访问的域名,每一种类型的网络请求需要设置一个域名,注意如果在这里设置域名为
      https://example.com/api/
      ,那么
      https://example.com/api
      是无法调用的,必须加上后面
      /
      。[h1]http请求[/h1]使用
      wx.request
      可以发起一个http请求,一个微信小程序被限制为同时只有5个网络请求
      function queryRequest(data){        wx.request({        url:"https://example.com/api/",        data:data,        header:{           // "Content-Type":"application/json"        },        success:function(res){            console.log(res.data)        },        fail:function(err){            console.log(err)        }    })}
      上面的代码会发送一个http get请求,然后打印出返回的结果。其中的参数也比较容易理解。
      • url
        服务器的url地址
      • data
        请求的参数可以采用String
        data:"xxx=xxx&xxx=xxx"
        的形式或者Object
        data:{"userId":1}
        的形式
      • header
        设置请求的header
      • success
        接口成功的回调
      • fail
        接口失败的回调
      另外还有两个参数没有在代码里:
      • method
        http的方法,默认为GET请求
      • complete
        调用接口结束之后的回调,无论成功或者失败该接口都会被调用
      [h1]上传文件[/h1]上传文件的api为
      wx.uploadFile
      ,该api会发起一个
      http post
      请求,其中的
      Content-type
      multipart/form-data
      。服务器端需要按照该
      Content-type
      类型接收文件,示例代码:
      function uploadFile(file,data) {    wx.uploadFile({        url: 'http://example.com/upload',        filePath: file,        name: 'file',        formData:data,        success:function(res){            console.log(res.data)        },        fail:function(err){            console.log(err)        }    })    }
      其中的
      url
      header
      success
      fail
      以及
      complete
      和普通的http请求是一样的。这里有区别的参数是:
      • name
        文件对应的key,服务器端需要通过
        name
        参数获取文件
      • formData
        http请求中可以使用的其他参数
      [h1]下载文件[/h1]下载文件的api为
      wx.downloadFile
      ,该api会发起一个http get请求,并在下载成功之后返回文件的临时路径,示例代码:
      function downloadFile(url,typ,success){    wx.downloadFile({        url:url,        type:typ,        success:function(res){            if(success){                success(res.tempFilePath)            }        },        fail:function(err){            console.log(err)        }    })}
      其中的
      url
      ,
      header
      ,
      fail
      ,
      complete
      wx.uploadFile
      的参数使用是一致的,其中有区别的参数是:
      • type
        :下载资源的类型,用于客户端自动识别,可以使用的参数
        image/audio/video
      • success
        :下载成功之后的回调,以
        tempFilePath
        的参数返回文件的临时目录:
        res={tempFilePath:'文件路径'}
        下载成功后的是临时文件,只会在程序本次运行期间可以使用,如果需要持久的保存,需要调用方法
        wx.saveFile
        主动持久化文件,实例代码:
      function svaeFile(tempFile,success){    wx.saveFile({        tempFilePath:tempFile,        success:function(res){            var svaedFile=res.savedFilePath            if(success){                success(svaeFile)            }        }    })}
      使用
      wx.saveFile
      保存临时文件到本地,提供给小程序下次启动时使用,其中的参数:
      • tempFilePath
        需要被保存文件的路径
      • success
        保存成功的回调,返回保存成功的路径,使用
        res.savedFilePath
        可以获取保存成功的路径
      • fail
        失败的回调
      • complete
        结束的回调

      [h1]超时的设置[/h1]
      微信小程序开发:MINA中已经提到了在
      app.js
      中设置
      networkTimeout
      可以设置四种类型网络访问的超时时间:

      "networkTimeout":{
      "request": 10000,
      "connectSocket": 10000,
      "uploadFile": 10000,
      "downloadFile": 10000
      }

      这里设置的超时时间对应着四种类型的网络请求。

      源代码请参考:https://github.com/jjz/weixin-mina/blob/master/api/api.js