上周被一个小程序刷屏了。吓得我周末赶紧看了知乎日报小程序版。吓了一跳，总结一下这段开发经验和踩过的坑。开发环境准备小程序出来第二天就破解了，第三天微信下载了开发工具。现在只需要下载微信开发者工具即可使用。创建项目的时候一定要选择noappid，这样appid就不会验证了。目录结构app.js注册app逻辑，app.wxss全局样式文件app.json配置信息pages存放页面文件utils工具类代码images图片资源文件小程序中每个页面都会有三个文件.wxml.wxss.js，对应有了结构，有了样式，有了逻辑，就相当于网页中htmlcss和js的关系。从新项目开发首页代码{{userInfo.nickName}}{{motto}}/**index.wxss**/.userinfo{display:flex;flex-direction:column;align-items:center;}.userinfo-avatar{width:128rpx;height:128rpx;margin:20rpx;border-radius:50%;}.userinfo-nickname{color:#aaa;}.usermotto{margin-top:200px;}//index.js//获取应用实例varapp=getApp()Page({data:{motto:'HelloWorld',userInfo:{}},//事件处理函数bindViewTap:function(){wx.navigateTo({url:'../logs/logs'})},onLoad:function(){console.log('onLoad')varthat=this//调用应用实例的方法获取全局数据app.getUserInfo(function(用户输入fo){//更新数据that.setData({userInfo:userInfo})})}})在新建的项目中，会在index下看到这些代码，然后引入wxmlwxssjswxml，就是对的描述文件页面结构。主要用于对以下内容以标签的形式指定组件使用使用wx:forwx:if等指令完成对一些模板的逻辑处理使用bind*绑定事件wxss样式文件，与css语法基本一致，但支持的选择器语法有限。看这里。内部可以使用flexbox完成布局或者使用import命令导入外部样式文件@import"common.wxss";.pd{padding-left:5px;}js页面逻辑控制，遵循commonJs规范//util.jsfunctionformatTime(date){//....}functionformatDate(date,split){//...}module.exports={formatTime:formatTime,formatDate:formatDate}varutils=require('../../utils/util.js')这里的js不在浏览器环境运行，所以window.*等代码会报错，不允许dom操作。官方目前好像还不能支持其他js库运行和全封闭，以后应该会逐步完善。使用页面上的Page方法注册一个页面Page({data:{//text:"Thisisapage"},onLoad:function(options){//页面初始化options是页面跳转带来的参数},onReady:function(){//页面渲染完成},onShow:function(){//页面显示},onHide:function(){//页面隐藏},onUnload:function(){//页面关闭}})当我们需要改变绑定的数据时，我们必须调用setData方法修改它来触发页面更新，像这样：Page({data:{text:'Thisisapage'},onLoad:function(){this.setData({text:'thisispage'})}})条件渲染和列表渲染以下内容来自微信官方文档。小程序使用wx:if="{{condition}}"完成条件渲染，类似vue的v-ifTrue也可以使用wx:elif和wx:else添加一个else块：5}}">12}}">23wx:for控件属性绑定了一个数组，组件可以使用数组中每一项的数据重复渲染。内置变量index（数组遍历的下标），item（数组遍历的每一项）{{index}}:{{item.message}}Page({items:[{message:'foo',},{message:'bar'}]})使用wx:for-item指定数组当前元素的变量名使用wx:for-index来指定数组的当前索引目标变量名：{{idx}}:{{itemName.message}}事件绑定wxml只是用bind[eventName]="handler"语法绑定事件tapPage({bindViewTap:function(e){console.log(e.taget)}})通过data-*和e.target.dateset传递参数tapPage({bindViewTap:function(e){//会自动转成驼峰命名console.log(e.taget.dataset.testMsg)//啦啦啦啦啦啦啦啦}})e.target.dataset中的坑事件绑定到目前为止，已经被踩到了。在父组件中绑定事件和参数，点击时，子组件将事件冒泡给父组件。此时，e.target.dataset为空tapPage({bindViewTap:function(e){console.log(e.taget.dataset.testMsg)//undefined}})在线图片加载不稳定。知乎日报项目中有大量图片需要从网上下载。这里图片组件的显示极不稳定。许多图片无法显示。***微信小程序还处于内测阶段，还有很多问题需要完善。不过对于开发速度和体验还是有好处的。期待资源官方文档开发工具下载awesome-wechat-weapp的正式发布日
