未来计划图片预览功能支持wxml,storage,appData
开发者工具面板支持提供桌面端工具支持

微信应用号终于来了!我们用一上午搞定了它。经过一个上午的紧张开发,爱范儿旗下的电商平台玩物志率先提交了微信平台第一个小程序。玩物志是爱范儿立足“新生活引领者”的定位,为我们的用户提供具有时代气质、高品质“新生活必需品”的微信内容电商。因此当拿到了这个宝贵的开发内测资格后,我们决定在微信上开发和迁移玩物志电商服务,用一种更贴近用户的方式来贯彻爱范儿微信电商的实践。应用号开发到底跟原生
App 开发或者 HTML 5
应用开发有什么不同?我们决定将这几个小时的成果分享给大家。步骤虽然都是在微信公众平台的体系下,但小程序本身与订阅号及服务号是完全独立的,需要重新注册。目前界面较为简洁,没有太多的运营相关的功能,这些功能应该会在以后小程序大规模使用之后逐渐被完善。

因为没办法用npm安装到本地(开头提到的,微信小程序会尝试去加载项目目录中的所有js),所以这里使用全局安装,第二条命令是启动remotedev-server,hostname和port分别指定为localhost和5678。

✓ 获取手机系统信息:同官方工具,返回为模拟返回✓ 监听重力感应数据:支持
Safari mobile 等移动浏览器调试,官方工具不支持✓ 监听罗盘数据:支持
Safari mobile 等移动浏览器调试,官方工具不支持✓ request 请求接口✓
websocket 接口✓ 上传、下载文件✓ 保存文件✓ 选择/预览图片✓ 选择视频✓ 录音
API✓ 音频播放控制✓ 背景音乐控制✓ 获取当前位置✓ 使用原生地图查看位置✓
storage 同步 API✓ storage 异步 API

澳门微尼斯人手机版 11如果要绑定开发者的话,还需要开发者自己通过扫码来通过验证。澳门微尼斯人手机版 2小程序平台目前的重头戏都在它的桌面端开发工具上,web
平台目前只是做一些开发者绑定和应用信息处理的事情,web
上面最重要的部分个人认为还是其文档说明。点击进去之后能看到从设计到开发到运营的整体说明,看完之后,一个成熟的开发团队应该可以很快就完成客户端业务的迁移。从这套文档的成熟度可以看出微信团队对这个千呼万唤始出来的小程序的重视。在设计的说明部分,不但已经有了guideline
也已经有了 demo
的页面让你去使用,从程序效率提高的关键点到视觉规范都一一做了说明,可以说一开始就达到了苹果开发者指南的标准。在开发的说明部分,已经给出了能开发出一个完全可用的电商应用的几乎所有接口,这一点让我们感到很欣慰。在下载了桌面端微信
web 开发者工具并结合这份文档学习、跑完 demo
之后,能感觉到小程序本身的强烈特殊性:纠正大家的误读,小程序不是 HTML5
应用。因为它是一个封闭的程序运行环境。
虽然是用标准的 JS
语言来编写,但是在这个环境里是无法打开任何外部的页面的。它不能够跳转或者说只能在内部的相对路径进行跳转,同时你也不能使用各种调用本地资源例如
DOM 树、File 等资源的外部 JS 类库,例如 jQuery 等。基本上就是用
JavaScript
语言重新定义了一个开发框架,用来开发富客户端。在小程序推出之后,有人说接受了简单的前端培训的初级程序员将供不应求,个人认为这种说法是不靠谱的。小程序虽小,但是每一个都是一个完备的应用,需要开发者有应用开发的整体意识。另外,坦白来说,JavaScript
并不是一个很好的开发严谨应用的语言,用 JavaScript
来构建富客户端需要开发者对代码有更深的理解。澳门微尼斯人手机版 3在了解完之后,就要上手开始开发了。开发工具也是通过扫码登录的,在登录之后,在新建项目部分,通过选择本地的开发目录并“添加项目”,工具会在该文件夹自动生产基础的框架代码。目前没有做项目类别的区分,比如游戏、工具之类的,只是一个基础的
main
的入口。澳门微尼斯人手机版 4澳门微尼斯人手机版 5如果是小项目的话,个人觉得在这个开发工具本身进行编辑就已经
ok 了。整个 IDE 的感觉非常清爽,无论对 JS 还是 CSS
的各种提示和补全都非常灵敏和详细。代码从结构上来看也是很清晰的,配置文件和
CSS 文件都重新进行了 wx
作为开头的命名。我们花了一个上午的时间,基本上将我们的网页端移植了过来。在这里要注意的是,在资源文件方面,本地调试是可以使用本地的文件、图片资源的,但是如果要手机预览调试的话,就必须调用网络资源,所以要注意相对路径的移植。澳门微尼斯人手机版 6心得对于电商应用来说,最关键的是支付,玩物志一开始就具有微信支付的权限,这次小程序第一时间就开放了微信支付的
API,这也是我们第一时间就要移植电商服务的原因。可以想见微信对生活、服务类小程序的期待。澳门微尼斯人手机版 7除了在小程序的接口支持上,小程序的模板消息也充分考虑到了电商服务的需求。可以设置不同的样式和标题。这相对之前简陋而且被滥用的模板消息是一个很大的进化。这也预示了小程序相对订阅号、服务号将会有更加好的用户交互能力,微信将成为一个更好的消息应用平台。澳门微尼斯人手机版 8耗时整个开发移植过程,我们的
5
个人的开发小组使用了一个上午的时间(注册平台账号,阅读、学习文档的部分不算)。对于成熟的开发团队来说,整体开发体验还是较为良好的,目前在使用
react 框架的团队应该会感到小程序的框架很亲切。当然,如果你的代码 DOM
操作很多的话,那改起来就会很痛苦了,那只能建议要重构了。由于我们之前使用的
JS
框架与小程序的框架有很大相似性,所以这方面并没有花太大的时间改动。主要是整体过滤一遍,进行了微信特有接口的替换。这里要称赞一下微信开发者工具的编译效率,能让我们在找到区别并修改之后能快速验证。期间有模糊的地方,也得感谢微信开发团队朋友们的即时反馈和大力支持。澳门微尼斯人手机版 9成果下面就是我们今早奋战了一个上午的结果,玩物志的客户端可以在小程序里跑起来了。当然,这只是第一步。澳门微尼斯人手机版 10在手机上呈现的效果:澳门微尼斯人手机版 11由于目前还是内测的原因,手机预览或者实际部署的应用还没有办法在当前版本的微信客户端中看到。大家应该还得等更新版本的微信的发布,才能看到我们的成果。澳门微尼斯人手机版 12下一个版本微信的发布,又将掀起互联网界的滔天巨浪。各位开发者、运营者,你们准备好没有呢?Hello小程序将与您共同成长。微信号:130870319
QQ群:40726600

所以只要需要让第三方库的代码使用这种形式的export就可以了。构建Redux的微信小程序包这里主要目标是打一个Redux包,让它可以兼容微信小城的加载方式下载Redux的代码到本地git
clone

没有限制: WEPT
生成的小程序页面可以运行在移动端浏览器上面,使用过程也无需联网。它通过一个定制的代理协议使用后台转发
XHR 请求,开发者无需配置后端 CORS 即可调试。

这个时候可以使用
QQ群:40726600

Hello小程序将与您共同成长。微信号:130870319 QQ群:40726600

把devtool使用redux的compose加到store中去。hostname和port是指定为之前启动remotedev-server启动时候指定的参数。保存之后重启一下小程序,如果没有报错的话就OK了

更多的 API: WEPT 除了支持全部官方已支持 API
之外,还实现了重力感应和罗盘的 API,你可以在支持相应 html5
接口的移动端浏览器上进行调试。

集成devtoolconst {createStore, compose} =
require(‘./libs/redux.js’);const devTools =
require(‘./libs/remote-redux-devtools.js’).default;const reducer =
require(‘./reducers/index.js’)function configureStore() { return
createStore(reducer, compose(devTools({ hostname: ‘localhost’, port:
5678, secure: false })));}module.exports = configureStore;

实现原理简单说它就是一个与后端通过 WebSocket
接口与前端进行实时通讯的 web
服务。后端服务请求时动态编译所需文件,前端通过 iframe 实现了 view
层、service 层以及控制层页面的多方通讯和控制逻辑。前端 view 层和 service
层代码来自微信开发者工具最新版本(目前是 101100, 稍作修改以支持 iframe
通讯以及自动更新),控制层页面是完全重新实现的,使用了一点React进行 UI
状态同步。安装 & 使用首先你需要安装 node,请确保版本大于
6.0,低版本有可能报错。然后任意目录运行:npm install -g
wept安装完成后在项目根目录下运行, 官方 demo 下载:wept即可开启服务,访问
Chrome developer devtools
开启启动模式调试),你也可以通过 -p参数换个端口,例如:wept -p
4000手机访问记得使用电脑的局域网 IP 地址。API
支持情况
以下是当前所有小程序 API 的支持情况:✓ app.json window 设置✓
app.json tabbar 设置✓ 微信登录:目前返回同官方工具无 appid
状态一致,为模拟返回✓ 获取用户信息接口:返回测试用数据✗
发起支付:同官方工具无 appid 状态,无法使用✓ 设置界面标题✓
标题栏加载动画✓ 页面跳转✓ 下拉刷新✓ 创建动画✓ 创建 Canvas 绘画✓
获取手机网络状态:默认返回 WIFI

修改好的包在这里:remote-redux-devtools

更加稳定: WEPT
的小程序构建过程相比官方工具要更加稳定,不会像官方工具一样经常性报错
appservice not
ready,甚至直接崩溃,如果遇到后台或者小程序构建错误,它会在页面上即时给出错误提醒。如果你安装了
growl或者 terminal-notifier,它还会同时在桌面上弹出错误提醒。

所以的模块都会被套上下面的代码:

项目地址: wxml
wxss javascript
json更加稳定,不像官方工具经常出错没有限制,无需联网,无需后端配置 CORS
,支持移动浏览器调试

通过这里的示例,其实我们发现,我们可以通过类似的方法,使用Webpack打包第三方库,就可以集成任何库了。使用Redux我们可以使用Redux的微信小程序绑定库来简化一些代码:wechat-weapp-redux,详细的安装和使用说明可以参照wechat-weapp-redux的README集成Redux-devtools如果没有redux-devtools那么使用redux的效果可能是要减半的。因为微信小程序的开发环境是定制的,暂时没有发现办法直接安装redux-devtool的插件。这里使用remote-redux-devtools,remotedev-server安装remote-redux-devtools原版的remote-redux-devtools使用的一个websocket的依赖会使用原生的WebSocket,小程序是不支持的,所以需要改成小程序的websocket实现。

实时刷新演示优酷视频地址:
Mac 和
win7 上可用,如遇到 bug ,欢迎 github 开 issue 。详细介绍WEPT
是一款微信小程序实时运行环境,相比于现在官方提供的开发者工具,它具备以下几个特点:完全实时:它已全面支持
wxml, wxss,javscript 和 json
文件的自动热更新,文件保存后相应变化会自动更新到小程序的运行环境,开发者完全不需要重建、重启操作,绝大多数情况下(除非修改
app.json
)也不需要刷新。因为没有了刷新,开发者不用再费时去操作界面重现修改前的页面状态。整个过程支持多终端同步进行。

同时,如果我们去观察小程序开发环境的network面板,点击任何一个js,我们可以发现:项目目录中的**所有js文件都会自动被加载,无论我们是否在代码中require**

将第二行代码:if(typeof exports === ‘object’ && typeof module ===
‘object’)

发表评论

电子邮件地址不会被公开。 必填项已用*标注