微信小程序学习简介

摘要：具体调用参考接口请求封装函数一般在中实现微信自带的网络请求方法调用接口请求函数如在中首先需要获取应用实例调用数据请求在函数中声明的一个全局变量，接下来使用点语法直接调用请求下来的值就可以了。

参考方法

小程序官方文档

app.json ：设置一些工程全局的量
.js : 写一些函数逻辑
.wxml: 调用.js中写的函数类似于 web的html 类似于IOS 的View UI 层
.wxss: 控件的属性描述，类似于 web 的 CSS ，类似于 IOS 的控件属性封装

注释：（每个目录的注释规则不一样，但是亲测 commond+? 都可以自动加注释）。

组件文档

一般我们在工程的“app.json”中设置 1.pages 所有的页面路径，2.window 导航栏头部 3.tabBar 底部的tabBar，小程序中我们用list 数组结构存放tabBarItem 。

//.wxml ， 函数goBack实现在.js文件中，button 样式制定在 .wxss文件中

</>复制代码 
返回

image 默认100%填充控件，定制image样式需要用到 style 标签样式。 mode ：图片缩放规则，“{{}}”代表对象是一个参数

</>复制代码 

图标 ，type的类型有success, success_no_circle, info, warn, waiting, cancel, download, search, clear 这几种

</>复制代码 
    
           
    

</>复制代码 
  
    
     
       
          
             
              
          
      
  

以画一个笑脸为例：

</>复制代码 
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()
},

flex布局，position ，inline-block，-webkit-box 等都是小程序布局中经常用到的。

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 absolute：绝对定位，相对于父级，此时父级必须是已定位的。 relative：相对定位，相对于自己，具体效果实操中感受 （比如对象需要离屏幕右边界20px ,但是右边无可参考元素时，可考虑绝对定位，但需要找准父视图。）

</>复制代码 
.mix{
display: flex;
/** margin:相当于盒子本身以外相对方向上的最近的元素，若该方向上没有元素 则设置值无效，此时应该使用position进行绝对定位，可相对布局 **/ 
margin-top: -20px;
/** 小程序中的定位问题  absolute：启用绝对定位 relative：相对定位**/
position: absolute;
right: 20px;
}

跳转到某个一级页面：url 页面路径; open-type：open-type 属性类型详解; hover-class ：点击效果

</>复制代码 
查看日志

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);
    }
  }
});
//接下来使用点语法直接调用请求下来的值就可以了。