1 微信公众平台

腾讯: 微信通讯(9亿用户群) 张小龙
-微信公众平台-(订阅号)-[电视台;报纸;杂志]
-微信公众平台-(小程序)-[小程序] pc/android/ios
-微店
-微信公众平台-(小游戏)

2 微信小程序

小程序特点:不需要下载即可使用，用完即走.
小程序发布时候对软件要求项目最大1MB,升级有2MB

微信公众平台–注册帐户 [小程序] [订阅号]
https://mp.weixin.qq.com/cgi-bin/loginpage?t=wxm2-login&lang=zh_CN
官方提供小程序开发工具
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=19022017

2.1 目录结构与文件类型

wx/pages 项止所有组件保存目录
index.wxml 首页:wxml不是html(严格一组xml标签)
app.wxss 全局样式(单位 rpx;@import “wx.wxss”)
app.js 入口程序
app.json 项目配置文件

小程序中wxml是一种xml文件用于描述网页结构
-所有标签有开始必须有结束 <text>
-属性必须双引号 <button name=“btn”>
常用标签

   <view></view>         相当于  	<div></div>
   <text></text>          相当于   	<span><p>
   <image></image>      相当于    <img src="" />
   <navigator></navigator> 相当于   	<a>
   <form></form>

#小程序在运行时有一个自动化操作,在运行自动将组件对应
wxss和js文件加载到当前组件wxml
#在小程序默认不需要引入同名样式文件或者js文件

2.1.1 image

#image默认大小 width:320px; height:240px;
#图片路径 <image src=“图片路径” />
(1)本地绝对路径 /pages/img/blue.png
(2)本地相对路径 …/…/img/blue.png
(3)网络绝对路径 http://www.baidu.com/logo.png
#图片常用属性
-lazy-load 懒加载 <image lazy-load=‘true’ >
-mode
aspectFill 显示图片等比例缩放以短边为准
aspectFit 显示图片等比例缩放以长边为准

2.1.2 text

selectable false 文本内容是否可以选中复制
decode false 是否对文本的内容编码

2.2 wxss

二个新特性
-rpx (r 响应式)
前端开发流程
(1)设计工程师 ps 创建手机效果图物理像素 6 750px/2
(2)前端工程师 html/css/js/… 逻辑像素 375px
小程序新单位rpx:元素宽度
(1)设计工程师 ps 创建手机效果图物理像素 6 750px
(2)前端工程师小程序逻辑像素 750rpx
#注意事项:字体大小 12px;
-@import 引入其它样式文件
@import “样式文件”

2.3 js

小程序为每一个组件对应创建对象和.js文件
Page() 当前组件对象
Page({data:{},onload:function(){}…})
小程序js与原生js区别
-ECMAScript
–基本数据类型:number;string;boolean;null;undefined
–引入:Object;Math;Date;RegExp;…
-DOM/BOM 没有
-小程序有顶级对象 wx (类似window)
查看小程序wx手册:
https://developers.weixin.qq.com/miniprogram/dev/api/

data{msg:“tarena”}
-显示数据 {{msg}}
-修改数据 this.setData({msg:"新值 "})
-获取数据 var m = this.data.msg

3 组件

3.1 组件生命周期

-生命周期:一个组件从创建到销售过程
onLoad: 组件加载完成触发一次!!!
-发送ajax请求
-获取其它组件传递过来参数options
onload(options){}
onReady: 组件初始渲染完成触发一次
onShow: 组件显示触发多次/将组件切换前台执行
onHide: 组件隐藏或者切换后台执行
onUnload 组件卸载触发(将组件移出内存)一次
a ->跳转wx.redirectTo({url:"/pages/…"})->

3.2 组件特殊事件

-onPullDownRefresh 监听用户下拉操作[更新]
#默认小程序禁止用户下拉操作
#解决问题
-全局修改配置:所有组件均可下拉操作
app.json{
“window”:{“enablePullDownRefresh”: true}
}
-指定组件修改配置:当前组件可以下拉操作
exam3.json “enablePullDownRefresh”: true
-onReachBottom 监听用户上拉触顶操作[加载更多]
-onPageScroll(opt) 监听用户滑动操作
opt.scrollTop 页面垂直方向己经滚动距离

3.3 组件跳转与传参

方式:标签
<navigator url=“组件路径”>文字…
跳转路径可以使用相对路径也可以用绝对路径
绝对路径: /pages/index/index
相对路径: …/exam/exam
#如果组件己经定义在tabbar中不能通过标签跳转
#跳转成功可以后退
方式:编程
(1)wx.redirectTo({url:“组件路径”});
#卸载当前组件并且跳换下一个指定组件
#不能跳转tabbar中定义组件
(2)wx.navigateTo({url:“组件路径”});
#**保留(可以点击返回)**当前组件并且跳转下一个指定组件
#不能跳转tabbar中定义组件
(3)wx.reLaunch({url:“组件路径”});
#保留当前组件并且跳转下一个指定组件
#能跳转tabbar中定义组件

程序js与标签wxml中指定组件路径添加/根路径，配置文件json中不需要添加/根路径
优先使用标签<navigator>，其次选择保留跳转navigateTo

1）传参数
url:"/pages/index/index?id=1&age=19"
2）取参数
onLoad(options){
console.log(options.id);
console.log(options.age);
}

4 微信小程序配置

-全局配置项 app.json
pages:array 配置组件路径
window 窗口样式
“navigationBarBackgroundColor”: “#fc0”,导航条背景色，必须十六进制颜色
“navigationBarTitleText”: “学子商城”, 导航条文本内容
“navigationBarTextStyle”: “black”, 导航文本样式[white/black]
“enablePullDownRefresh”: true 触发下拉操作

微信小程序验证合法域名：设置->项目设置 ->[*]不校验合法域名

5 tabbar底部导航栏

tabbar至少2个选项；
文件路径不加/，不支持网络只支持本地路径
图片路径：pages/img/1.jpg
组件路径：pages/index/index

 "tabbar":{
    "list":[{
         pagePath:"组件路径",
         text:"文本",
         iconPath:"图标",
         selectedIconPath:"选中图标"
     }]
  }

-当前组件配置项 exam3.json
pagePath组件路径一定存在

6 微信小程序数据显示

Page({data:{},方法名:function(){}})
小程序动态获取data值,使用双花括号 {{msg}}，data属性保存初始化值
控制结构
1）if

  <view  wx:if="{{condition}}">xxx</view>
  condition:表达式也可以变量 true false
          true 当前元素正常显示
          false 当前元素删除
  -if else
  <view wx:elif="{{condition}}"></view>
  <view wx:else></view>

2）for
<view wx:for="{{数组对象}}">
默认情况下当前对象 item 当前元素下标 index
修改默认值 wx:for-item=“当前元素” wx:for-index=“下标”
wx:key=“index”
为了提高效率小程序在循环之前对数据排序,需要一个不重复值

7 微信小程序事件

1）pc事件:
-操作依靠鼠标;键盘
-事件 click mousemove keypress …
2）移动端事件:
-操作依靠手指
-事件
触摸事件–通用原生 BOM事件
addEventListener(“事件名”,function(){})
touchstart 当手指触碰屏幕时发生不管几个手指
touchmove 当手指在屏幕滑动时连续触发
touchend 当手指离开屏幕时发触发
由于原生移动事件使用时不是很方便,可以使用第三方移动函数库zepto.js – 相当于pc的jquery

触碰函数
tap 按一次
longtap 长按一次 300ms 以上
swipe 滑动
swipeLeft 左滑
swipeRight 右滑
swipeUp 上滑
swipeDown 下滑
$("").tap(function(){});
#注意事项:禁止屏幕滑动 *{touch-action:none}

7.1 微信小程序事件绑定

-tap 手指触碰屏幕后马上离开
-longtap 手指触碰屏幕后超过300ms离开旧
-longpress 手指触碰屏幕后超过300ms离开新

事件绑定

<view bindtap="函数1">
  <view bindtap="函数2">tap me</view>   支持事件冒泡
</view>
<view catchtap="函数">tap me</view>  不支持事件冒泡

7.2 微信小程序事件对象

handle1:function(e){}
type:“tap” 触发的事件名称
currentTarget: 绑定事件的当前元素
target: 触发事件元素
timeStamp: 当组件打开到触发事件经过毫秒
元素与事件处理函数传值方法与vue相同：设置自定义属性data-idx，e.target.dataset.idx

8 小程序异步请求

小程序中显示数据(图片;音频;视频…)，依赖服务器端数据
发送ajax请求获取服务器数据将并保存数据
data属性中再显示.
wx.request({}); 小程序发送异步请求
url:"" 请求服务器端程序地址 http://127.0.0.1:3000/login
method 请求方法 GET/POST 默认GET
data:{} 请求参数 uname upwd
success:(res)=>{} 请求成功回调函数服务器端状态码200
fail 请求失败回调函数 500 …
complete 无论请求成功或者失败都回调函数

9 常用应用

9.1 轮播图

  <swiper  autoplay>
    <swiper-item wx:for="{{list}}" wx:key="index">
      <image src="{{item.xxx}}" lazy-load mode="aspectFill"></image>
    </swiper-item>
  </swiper>

常见属性:
-autoplay 自动播放
-interval 间隔时间
-indicator-dots 指示点
-vertical 是否是纵向

9.2 等待加载

//创建动画组件
wx.showLoading({title:“正在加载数据…”});
//卸载动画组件
setTimeout(function(){
wx.hideLoading();
},500);
监听用户下拉动作
配置文件"enablePullDownRefresh": true

9.3 form表单

   <form  bindsubmit="checkForm">
     <input type="text" name="name" />
     <button fromType="submit">添加商品</button>
   </form>

9.4 提示消息

   wx.showToast({
    title:"提示消息",
    icon:"图标"  loading/success
   });
   wx.hideToast();

9.5 多媒体(音频文件)

小程序要求同一时刻，只能有一个背景音频在播放,当有其它小程序占用播放器来，播放音乐，当前音频停止.
方法与事件

播放背景音乐
wx.playBackgroundAudio({})
-dataUrl 音乐链接 #目前小程序支持音频格式
mp3;wav;aac;m4a…
-title 音乐标题
-converImgUrl 封面
暂停播放背景音乐
wx.pauseBackgroundAudio();
停止播放背景音乐
wx.stopBackgroundAudio();
事件
播放背景音乐触发事件
wx.onBackgroundAudioPlay
暂停背景音乐触发事件
wx.onBackgroundAudioPause

10 全局存储

data中存储数据在当前组件中任意使用；
全局共享数据
1）创建全局共享数据
app.js
App({ globalData:{数据属性名:值} })
2）其它组件中使用-获取也可以修改
加载全局组件 getApp()获取全局对象
const app = getApp();//在page对象外定义
依据全局组件获取全局数据
值 = app.globalData.数据属性名;
依据全局组件修改全局数据
app.globalData.数据属性名 = 值;

11 上传文件(图片/视频/音频)

小程序上传图片会在服务器上转换成临时文件，再存储为文件名为时间戳+随机数的格式
1）下载并且加载第三方模块 multer
npm i multer
const multer = require(“multer”);
var upload = multer({dest:“upload/”});
2）处理上传文件请求
app.post("/uploads", upload.single(“mypic”),(req,res)=>{});
只能使用post方式上传
upload.single一次只上传一张图片
mypic上传图片的参数名

   -req.file   req对象添加新属性 file
     file 保存上传文件信息
     req.file.size      			上传文件大小
     req.file.mimetype 		上传文件类型
     req.file.originalname 		上传文件原文件名 
     req.file.path        		临时文件路径

小程序上传操作

选择图片:从本地相册照片中或者使用相机拍照
wx.chooseImage({});
count:1 最多可以选中图片总数: 默认9
sourceType:[“camera”,“album”] 指定图片的来源
success:res 选择成功
tempFilePaths Array 本地图片路径列表
将选中图片上传服务器中
wx.uploadFile({});
url: 服务器端程序路径
filePath: 本地图片路径
name: 上传图片参数名称 mypic
header “Content-Type”:“multipart/form-data”
success 上传成功

WeChat小程序

微信小程序