正文
微信小程序学习简介
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
如何向微信小程序导入DEMO源码：
参考方法
参考学习小程序官方文档
小程序官方文档
小程序目录简介
app.json ：设置一些工程全局的量
.js : 写一些函数逻辑
.wxml: 调用.js中写的函数类似于 web的html 类似于IOS 的View UI 层
.wxss: 控件的属性描述，类似于 web 的 CSS ，类似于 IOS 的控件属性封装
注释：（每个目录的注释规则不一样，但是亲测 commond+? 都可以自动加注释）。
小程序组件简介
组件文档
tabBar && pages && navigationBar
一般我们在工程的“app.json”中设置 1.pages 所有的页面路径，2.window 导航栏头部 3.tabBar 底部的tabBar，小程序中我们用list 数组结构存放tabBarItem 。
button
//.wxml ， 函数goBack实现在.js文件中，button 样式制定在 .wxss文件中
<button class='redbtn' bindtap='goBack'>返回</button>
image
image 默认100%填充控件，定制image样式需要用到 style 标签样式。 mode ：图片缩放规则，“{{}}”代表对象是一个参数
<image style="width: 40px; height: 40px;" mode='aspectFit' src='{{item}}' bindtap='bindViewTap'></image>
icon
图标 ，type的类型有success, success_no_circle, info, warn, waiting, cancel, download, search, clear 这几种
<view class="group">
<block wx:for="{{iconType}}">
<icon type="{{item}}" size="40"/>
</block>
</view>
swiper 常用的轮播图控件
<view>
<!--indicator-dots 相当于IOS 的Page点; circular 是否采用衔接滑动-->
<swiper indicator-dots= 'false'
autoplay= 'true' duration='0.5' circular= 'true' previous-margin='30px' next-margin='30px'>
<!--for循环最好是放在block函数块中执行，view 中也可直接放在view中执行 -->
<block wx:for="{{imgUrls}}">
<swiper-item >
<!-- 此处的item 为泛指，指for循环体所循环数组里面对应的对象-->
<image src='{{item}}' height="150"></image>
</swiper-item>
</block>
</swiper>
</view>
canvas ：画布组件（可以自定制一些动画，类似于ios 的CAShapeLayer + UIBezierPath）画图逻辑在JS中实现）
以画一个笑脸为例：
onReady:function(e) {
var context = wx.createCanvasContext("popView", this)
//画矩形
context.setStrokeStyle("#00ff00")
context.setLineWidth(5)
//rect：矩形（X,Y,W,H）
context.rect(0, 0, 200, 200)
context.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)//一个stroke对应一个动画节点
context.stroke()
context.draw()
},
小程序API简介：API学习链接小程序UI布局简介
flex布局，position ，inline-block，-webkit-box 等都是小程序布局中经常用到的。
flex布局简介 布局参考链接
display：指定项目是否为伸缩容器，flex块级的伸缩，direction：方向
display: flex;
direction: 元素排列方向 row 从左向右 横向排, row-reverse 从右向左，column 竖向排列
flex-direction: row;
flex-wrap:控制元素是否换行 wrap 顺序换行 wrap-reverse 倒序换行
flex-wrap: wrap;
flex-flow: 相当于flex-direction: 和 flex-wrap 的综合体 此处多余。
flex-flow: row wrap;
justify: (主要是对齐方式玩的花样比较多) 沿主轴的对齐方式 主要说下space-around：平均分布在主轴 两端保留一半空间。space-between 平均分布在主轴 两端不保留空间。
justify-content: space-around;
align: 沿交叉轴的对齐方式(content：换行情况下的对齐方式，具体样式略)
align-content:center;
position 相对定位和绝对定位 （解决问题：单个对象靠右侧无其他对象参考情况下的右对齐布局）position参考链接
position absolute：绝对定位，相对于父级，此时父级必须是已定位的。 relative：相对定位，相对于自己，具体效果实操中感受 （比如对象需要离屏幕右边界20px ,但是右边无可参考元素时，可考虑绝对定位，但需要找准父视图。）
.mix{
display: flex;
/** margin:相当于盒子本身以外相对方向上的最近的元素，若该方向上没有元素 则设置值无效，此时应该使用position进行绝对定位，可相对布局 **/
margin-top: -20px;
/** 小程序中的定位问题 absolute：启用绝对定位 relative：相对定位**/
position: absolute;
right: 20px;
}
template 复用模板布局 template使用参考链接小程序简单交互逻辑页面跳转 (主要讲二级页面跳转一级页面/非原路返回)
页面跳转 (主要讲二级页面跳转一级页面/非原路返回)
跳转到某个一级页面：url 页面路径; open-type：open-type 属性类型详解; hover-class ：点击效果
<navigator url='../logs/logs' open-type='switchTab' hover-class='none'>查看日志</navigator>
全局变量的赋值
showSkuIndex 在page data 中声明的全局变量 都需要在系统的this.setData方法中进行赋值
this.setData({
showSkuIndex: index
});
接口请求及数据模型解析
微信小程序可以直接处理json数据 ，例子是在app.js 中封装的一个接口。在其他页面的.js中调用ajax 并在onShow函数中进行请求。就相当于我们的OC 中封装的一个网络请求方法类。具体调用参考demo
1.接口请求封装函数 一般在app.js中实现
ajax: function(options){
let that = this;
let params = {};
params = options.data || {};
params.source = 'wx_xiaochengxu';
params.version = '3.3.0';
if(params.sign !== undefined){
delete 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中
//首先需要获取应用实例
var app = getApp() onShow: function() {
//调用数据请求
this.getIndexData();
},getIndexData: function() {
var that = this;
app.ajax({
url: '/homepageV4',
success: function (res) {
var data = res.data;
wx.stopPullDownRefresh()
if (data.success) {
that.setData({
//hotBrands 在Page函数中声明的一个全局变量，
hotBrands: data.model.offlineHotList,
});
console.log(data.model)
} else {
wx.showTip(data.message);
}
}
});
//接下来使用点语法直接调用请求下来的值就可以了。
