微信小程序学习简介

2024年4月7日 82次阅读 来源: 地球媛

如何向微信小程序导入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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞