如何向微信小程序导入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);
}
}
});
//接下来使用点语法直接调用请求下来的值就可以了。

微信小程序学习简介的更多相关文章

  1. 微信小程序学习笔记一 小程序介绍 & 前置知识

    微信小程序学习笔记一 1. 什么是小程序? 2017年度百度百科十大热词之一 微信小程序, 简称小程序, 英文名 Mini Program, 是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是 ...

  2. 微信小程序 学习资料

    微信小程序 学习资料 资料名称 网址 官方教程 https://developers.weixin.qq.com/miniprogram/dev/index.html?t=18110517

  3. 【微信小程序学习笔记】入门与了解

    [微信小程序学习笔记(一)] IDE 下载安装 下载地址 官方工具:https://mp.weixin.qq.com/debug/w … tml?t=1476434678461 下载可执行文件后,可按 ...

  4. 微信小程序学习笔记二 数据绑定 + 事件绑定

    微信小程序学习笔记二 1. 小程序特点概述 没有DOM 组件化开发: 具备特定功能效果的代码集合 体积小, 单个压缩包体积不能大于2M, 否则无法上线 小程序的四个重要的文件 *js *.wxml - ...

  5. 微信小程序学习指南

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  6. 微信小程序学习

    官方网站 https://mp.weixin.qq.com/debug/wxadoc/dev/index.html 项目结构介绍 -- MINA框架 https://mp.weixin.qq.com/ ...

  7. 微信小程序学习笔记(阶段一)

    一阶段学习过程: (一)看官方文档的简易教程:https://mp.weixin.qq.com/debug/wxadoc/dev/ (二)看小码哥视频:https://chuanke.baidu.co ...

  8. 微信小程序学习笔记以及VUE比较

    之前只是注册了一下微信小程序AppID,随便玩了玩HelloWorld!(项目起手式),但是最近看微信小程序/小游戏,崛起之势不可阻挡.小程序我来了!(果然,一入前端深似海啊啊啊啊啊~) 编辑器: S ...

  9. 微信小程序学习笔记1--小程序的代码构成

    最近打算学习一下微信小程序,看了微信公众平台的文档感觉还比较简单,就从这个方向重新找回学习的状态吧: 1.先了解一下小程序的代码构成: 创建项目后会看到四种后缀的文件: .json 后缀的 JSON ...

随机推荐

  1. sql server 重命名表名,字段名

    重命名表名: exec sp_rename 'oldName','newName'; 重命名字段名: exec sp_rename 'tableName.[oldName]','newName','c ...

  2. 46)PHP,PHP语言为啥需要服务器

    1)用户的 Web 浏览器发出 HTTP 请求,请求特定 Web 页面. 2)Web服务器收到.php 的请求获取该文件,并将它传到 PHP 引擎,要求它处理. 3)PHP 引擎开始解析脚本. 脚本中 ...

  3. JacksonConfig

    package org.linlinjava.litemall.core.config; import com.fasterxml.jackson.annotation.JsonInclude; im ...

  4. How Cocoa Beans Grow And Are Harvested Into Chocolate

    What is Cocoa Beans Do you like chocolate? Most people do. The smooth, brown candy is deliciously sw ...

  5. 隐马尔可夫随机场HMM

    概率知识点: 0=<P(A)<=1 P(True)=1;P(False)=0 P(A)+P(B)-P(A and B) = P(A or B) P(A|B)=P(A,B)/P(B) =&g ...

  6. springboot+mybatis登录注册

    接上上一篇博客的继续往下做,上一篇已经实现了mybatis自动生成代码,和连接数据库测试部分 本篇我们添加一些功能,实现登录注册,时间原因,前端实现的很粗糙,以后有时间再改吧 首先看一下数据库的构成, ...

  7. mac下停止和启动mysql命令

    启动MySQL服务 sudo /usr/local/MYSQL/support-files/mysql.server start   停止MySQL服务 sudo /usr/local/mysql/s ...

  8. MySQL的详细操作

    MySQL的详细操作 存储引擎 不同的数据应该有不同的处理机制 mysql存储引擎 Innodb:默认的存储引擎 查询速度较myisam慢 但是更安全,支持事务,行锁,外键由于以上的支持,数据更安全, ...

  9. MOOC(10)- 获取响应中的cookie

  10. timber|stain|compensate|

    N-UNCOUNT 木材;原木;树木:林木Timber is wood that is used for building houses and making furniture. You can a ...