如何将DEMO源码导入微信小程序：参考方法参考学习小程序官方文档小程序官方文档小程序目录介绍app.json：设置一些项目全局数量。js：写一些函数逻辑.wxml：调用.js写的函数，类似于web的html，类似于IOS的ViewUI层。注释规则不同，亲测common+?可以自动添加注释）。小程序组件介绍组件文档tabBar&&pages&&navigationBar一般我们在项目的“app.json”中设置1.pages所有页面路径，2.window导航栏头部3.tabBar底部tabBar，在小程序中我们使用的列表数组结构存储tabBarItem。button//.wxml，在.js文件中实现goBack功能，在.wxss文件中制定按钮样式returnimageimage默认100%填充控件，自定义图片样式需要使用style标签样式。mode:图片缩放规则，"{{}}"表示对象是一个参数icon图标，type类型有success,success_no_circle,info,warn,waiting,cancel,download,search,clear常用的Swipercarouselcontrol画布s:Canvas组件（可以自定义一些动画，类似iosCAShapeLayer+UIBezierPath，绘制逻辑用JS实现）以绘制笑脸为例：onReady:function(e){varcontext=wx.createCanvasContext("popView",this)//绘制矩形context.setStrokeStyle("#00ff00")context.setLineWidth(5)//rect:Rectangle(X,Y,W,H)context.rect(0,0,200,200）上下文。stroke()//画圆（从右到左）context.setStrokeStyle("#ff0000")context.setLineWidth(2)//人脸最外圈//起点moveTo(X,Y)context.moveTo(160,100)//arc(圆心X,圆心Y,半径,0,角度(Math.PI=180度),true)context.arc(100,100,60,0,2*Math.PI,true)//嘴巴context.moveTo(140,100)context.arc(100,100,40,0,Math.PI,false)//左眼context.moveTo(85,80)context.arc(80,80,5,0,2*Math.PI,true)//右眼context.moveTo(125,80)context.arc(120,80,5,0,2*Math.PI,true)//一笔对应一个动画节点context.stroke()context.draw()}，小程序API介绍：API学习链接小程序UI布局介绍flex布局，position，inline-block，-webkit-box等经常用到小程序布局到了flex布局介绍布局参考链接显示：指定item是否为灵活容器，flex块级拉伸，direction：方向显示：flex；direction：元素排列方向rowhorizo??ntallyfromleft-to-right，row-reversefromright-to-left,column垂直排列flex-direction:row;flex-wrap:控制元素是否换行wrapSequentialwrapwrap-reverseReversewrapflex-wrap:wrap;flex-flow：相当于flex-direction:和flex-wrapmoc的组合，这里画蛇添足。flex-flow:rowwrap;justify:(主要是对齐方式有很多技巧可以玩）沿主轴的对齐方式主要是space-around：一半的空间均匀分布在main的两端轴。space-between均匀分布在主轴两端没有空间。justify-content:space-around;align:沿交叉轴的对齐方式（内容：换行情况下的对齐方式，具体样式省略）align-content:center;position相对定位和绝对定位（问题解决：单个对象向右右对齐布局，旁边没有其他对象引用）.relative：相对定位，相对于自己，具体效果在实践中感受（比如当对象需要距离屏幕右边框20px，但右侧没有引用元素时，绝对定位即可）已考虑，但需要确定父视图。）.mix{display:flex;/**margin:相当于相对方向上除了box本身最近的元素。如果该方向没有元素，则设置值无效。这种情况应该使用position进行绝对定位和相对布局**/margin-top:-20px;/**小程序中的定位问题absolute:启用绝对定位relative:相对定位**/position:absolute;right:20px;}templatereusetemplatelayouttemplateusereferencelinkapplet简单的交互逻辑页面跳转（主要讲二级页面跳转到一级页面/非原返回）跳转到某一级页面：url页面路径;open-type：open-type属性类型详解；hover-class:点击效果查看日志全局变量赋值showSkuInde??x页面声明的所有全局变量data需要在系统的this.setData方法中赋值this.setData({showSkuInde??x:index});接口请求及数据模型分析微信小程序可以直接处理json数据，例如app.js封装的接口。在其他页面的.js中调用ajax，在onShow函数中发起请求。相当于我们OC里面封装了一个网络请求方法类。具体调用参考demo1。接口请求封装函数一般在app.js中用ajax实现：function(options){letthat=this;让参数={};params=options.data||{};params.source='wx_xiaochengxu';params.version='3.3.0';if(params.sign!==undefined){删除params.sign;}params.sign=that.creatSign(params);//options.data.weChatSession=wx.getStorageSync('weChatSession')||'';//微信自带的网络请求方法wx.request({url:that.globalData.apiUrl+options.url,method:options.method||'POST',data:params,header:{'content-type':'application/x-www-form-urlencoded'},success:options.success,fail:options.fail});},2.调用接口请求函数如index.在js中//首先需要获取应用实例varapp=getApp()onShow:function(){//调用数据请求this.getIndexData();},getIndexData:function(){varthat=this;app.ajax({url:'/homepageV4',success:function(res){vardata=res.data;wx.stopPullDownRefresh()if(data.success){that.setData({//hotBrands是Page函数中声明的全局变量，hotBrands:data.model.offlineHotList,});console.log(data.model)}else{wx.showTip(data.message);}}});//接下来使用点语法直接调用请求的值
