微信小顺序进修简介

2024年5月27日 184次阅读 来源: 地球媛

怎样向微信小递次导入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);
    }
  }
});
//接下来运用点语法直接挪用要求下来的值就能够了。
    原文作者：地球媛
    原文地址: https://segmentfault.com/a/1190000013697722
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞