资讯专栏INFORMATION COLUMN

微信小程序学习简介

Drummor / 2771人阅读

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

如何向微信小程序导入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文件中

image

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

icon

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


    
           
    
swiper 常用的轮播图控件

  
    
     
       
          
             
              
          
      
  
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 :点击效果

查看日志
全局变量的赋值

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://www.ucloud.cn/yun/93415.html

相关文章

  • 信小程序学习简介

    摘要:具体调用参考接口请求封装函数一般在中实现微信自带的网络请求方法调用接口请求函数如在中首先需要获取应用实例调用数据请求在函数中声明的一个全局变量,接下来使用点语法直接调用请求下来的值就可以了。 如何向微信小程序导入DEMO源码: 参考方法 参考学习小程序官方文档 小程序官方文档 小程序目录简介 app.json :设置一些工程全局的量.js : 写一些函数逻辑.wxml: 调用.js中写...

    BetaRabbit 评论0 收藏0
  • 信小程序学习简介

    摘要:具体调用参考接口请求封装函数一般在中实现微信自带的网络请求方法调用接口请求函数如在中首先需要获取应用实例调用数据请求在函数中声明的一个全局变量,接下来使用点语法直接调用请求下来的值就可以了。 如何向微信小程序导入DEMO源码: 参考方法 参考学习小程序官方文档 小程序官方文档 小程序目录简介 app.json :设置一些工程全局的量.js : 写一些函数逻辑.wxml: 调用.js中写...

    LMou 评论0 收藏0
  • 从零开始:信小程序新手入门宝典《一》

    摘要:为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里,让大家方便的从零开始学习一微信小程序的特点张小龙张小龙全面阐述小程序,推荐通读此文小程序是一种不需要下载安装即可使用的应用,它出现了触手可及的梦想,用户扫一扫或者搜一下即 为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里,让大家方便的从零开始学习; 一:微信小程序的特点 张小龙:张小龙全面阐述小程...

    whataa 评论0 收藏0
  • 从零开始:信小程序新手入门宝典《一》

    摘要:为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里,让大家方便的从零开始学习一微信小程序的特点张小龙张小龙全面阐述小程序,推荐通读此文小程序是一种不需要下载安装即可使用的应用,它出现了触手可及的梦想,用户扫一扫或者搜一下即 为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里,让大家方便的从零开始学习; 一:微信小程序的特点 张小龙:张小龙全面阐述小程...

    mdluo 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<