编写一系列微信小程序微信小程序系列的开发要点微信开发者工具基本架构项目目录关于小程序的项目结构和文件目录，很多码友都发表过相关资料。这里不做更多解释，留一篇阅读：小程序项目目录结构介绍小程序DOM布局小程序可以使用内联样式，类样式可以实现内联样式：{{motto}}双括号实现动态样式//.wxml{{motto}}//.jsvarPARAM={data:{color:"red"},onLoad:function(event){//..}}//获取应用实例varapp=getApp();Page(PARAM)小程序兼容大部分传统CSS语法，包括但不限于：CSS3、position、float，比如传统的圣杯布局，左右双翼布局都可以在小程序端实现。小程序扩展了特征尺寸单位rpx。但是前端已经有了`vw`、`vh`；而且经过测试，`vw','vh`在wxml中可以完美实现，是不是就不用重新造轮子了？嘿嘿， 具体原因是国内社区响应者很少，//TODO//留下我的攻略@importimportexternalstylesheet/**common.wxss**/.small-p{padding:5px;}/**app.wxss**/@import"common.wxss";.middle-p{padding:15px;}//TODO//日常工作中一般使用`scss`，`import`将被广泛使用；`import`在小程序中使用协同开发，在组件引用上肯定有他的高明之处；//可以尝试使用`koala`等工具将`scss`和`wxss`组合起来，肯定会得到两倍结果事半功倍。微信小程序的View组件完美兼容微信小程序的Flexbox弹框模型Flex布局，以往因为flex在各个终端和平台的兼容性问题一直不温不火。现在可以充分利用flex。在小程序ui组件中编辑//行布局等属性，实现：flex-direction:column//前端布局中默认布局为行布局，默认显示值为block<视图style="background:blue">//列布局，实现：flex-direction:column弹性布局还有属性如：just-content、align-item等；该区资料保留阅读：CSSFlexibleBoxLayout-CSS|MDN和微信小程序flex-demo事件对象小程序支持的事件小程序的事件函数命名与传统的不同。比如传统的移动端点击事件是tap，而小程序是bindtap。这里复制一份事件函数数据供参考：微信小程序事件小程序事件监听方法//wxmlDataSetTest//jsPage({//事件参数为事件源对象，包括诸如currentTarget、dataset、type等信息bindViewTap:function(event){event.currentTarget.dataset.alphaBeta===1//-会转成驼峰式event.currentTarget.dataset.alphabeta===2//大写会转成小写}})操作DOM元素wxml不支持像jq那样操作dom元素，也没有appendChild之类的方法原生js；什么F？互动呢？改变class://wxmldemo//jsvarthat=this;that.setData({demoCss:"selectEd";});更改dom元素内容//wxml{{demoText}}//jsvarthat=this;that.setData({demoText:"demoText";});添加、删除、修改和检查dom元素。这里我们要放大：列表渲染小程序//wxmlviewwx:for="{{array}}">{{index}}:{{item.message}}//jsPage({data:{array:[{message:'foo',},{message:'bar'}]}})//效果//思路，大家可以尝试充分利用dataList属性//操作dom和条件渲染，模板方式，准备把这块单独写一个//TODOAJAX使用方法和传统的使用方法没有太大区别。网上的教材也很多，这里就不多解释了。php',//只是一个例子，不是真正的接口地址data:{x:'',y:''},header:{'content-type':'application/json'},success:function(res){console.log(res.data)}})有2种方式实现页面切换。使用位置隐藏到屏幕外，切换页面切换视图//请参考我下一个小程序系列-<左右切换tab-demo>//屏幕内的页面//屏幕外的页面使用小程序API，打开和关闭页面：导航小程序this(粗略地）this在正常函数中：functionf(){console.log(this)//undefined}setTimeout中的this指向varf=function(){setTimeout(function(){console.log(this)//function(){console.log(this)}})}this在setInterval中指向varf=function(){setInterval(function(){console.log(this)//thisPage({onLoad:function(option){console.log(this)//anameFortheobjectofe(includingsetData)}})一些注意事项-刷新dom，操作数据后必须通过setDate方法，重新渲染-调试可以通过console.*()系列方法在控制台打印信息总结：一套代码，运行在多个终端，符合趋势和发展逻辑；微信小程序值得学习，小程序摒弃了传统直接操作dom的开发方式，采用JavaScriptCore的开发思路，实现JS->WXML动态解析。借鉴之前流行的MVVM框架思想，实现了单向数据绑定，可移植性，在编码的过程中，真正只需要关心逻辑的实现，数据的排序，避免重复查找和操作dom.代码的简洁和逻辑梳理还是很有帮助的。附：问答小程序！必读原文地址：https://segmentfault.com/a/11...转载无需联系，但请名源@SF.GG-Starch。
