微信小程序开发
优点
- 无需安装。
- 随处可见，随处使用。
- 使用完，无需写在卸载。
小程序的申请地址。
安装微信小程序工具
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
小程序的目录结构
app.js（小程序的主要逻辑）
app.json （小程序全局的公共配置）
app.wxss （小程序全局的公共样式表）
页面的覆盖掉全局的配置
新建页面的步骤
- 在pages目录下，右键新建目录，在当前新建的目录下，新建page框架。
- 在app.json的pages选项中添加新建页面的路径。
小程序的生命周期，以及页面的生命周期
*小程序生命周期：
https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html
App({
onLaunch (options) {
// Do something initial when launch.
},
onShow (options) {
// Do something when show.
},
onHide () {
// Do something when hide.
},
onError (msg) {
console.log(msg)
},
globalData: 'I am global data'
})
onLaunch全局只会触发一次。
*页面生命周期：
https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log("onload")
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
console.log("onReady")
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
console.log("onShow")
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
onsole.log("onHide")
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
onsole.log("onUnload")
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
onLoad，onReady 只会渲染一次。
小程序的尺寸单位：“rpx”
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html
flex 布局
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
数据绑定
- mustache语法：{{}}
- 单向数据绑定
动态数据绑定
- 小程序的赋值通过this.setData(对象)
var apiData = {
textStr:"sever data",
name:"jack"
};
this.setData(apiData);
- 获取data的值
this.data.key 值
小程序的条件渲染
wx:if为true显示元素，为false就不显示元素。
<view style="text-align: center">考试成绩</view>
<view>{{score}}</view>
<view wx:if = "{{score>60}}"> 及格</view>
<view wx:elif="{{score>90}}">优秀</view>
<view wx:else>良好</view>
<view wx:if = "{{score != ''}}">不为空</view>
小程序的列表渲染
https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html
- wx:for 绑定数组，wx:for-item值为当前变量名 ，wx:for-index当前下标的变量名。
<block wx:for = "{{apiData}}" wx:for-item = "item">
<view class="item">
<view class="item_image">
<image src ="{{item.url}}" ></image>
</view>
<view class = "item_name"
>{{item.name}}
</view>
</view>
</block>
小程序事件绑定和事件交互
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
- bind+事件方法
- 需要在js中写对应的方法
<view>
{{changeText}}
</view>
<button bindtap="changetext" bindlongtap="longtap">
改变文字
</button>
--------------------------
data: {
// textStr:"hello word11 "
// score:90
datalist:[],
changeText:"hello hundun"
},
changetext:function(){
// console.log(1)
this.setData({
changeText:" ni hao ya "
})
},
longtap:function(){
console.log("longtap")
},
小程序事件机制 catch和bind
- bind 会用到冒泡的机制，catch会阻止事件的冒泡。
- 捕获阶段的bind 和catch
<view class="container" bindtap="containertap">
<text class="text" catchtap="texttap">点击</text>
</view>
capture-bind:tap(捕获事件)
capture-catch:tap（捕获事件）
<view class="container" bindtap="containertap" capture-bind:tap = "captruecontainer">
<text class="text" bindtap="texttap" capture-bind:tap = "captruetext">点击</text>
</view>
捕获事件先于绑定事件。从外层到内层捕获，从内层到外层绑定。
小程序的基础组件和常用组件
https://developers.weixin.qq.com/miniprogram/dev/component/icon.html
- icon
- progress
- rich-text
- text
<icon type = "search" size = "200" color = "red"></icon>
<progress percent="50" show-info ="false" stroke-width = "20"
active = "true"> </progress>
<text selectable="true">hahha </text>
<rich-text nodes = "{{textrich}}" ></rich-text>
小程序的表单组件
https://developers.weixin.qq.com/miniprogram/dev/component/input.html
- input
- checkbox
- checkbox-group
- button
- form
<form bindsubmit="bindsubmitform" bindreset="bindrestform">
<input name ="input" placeholder="请输入" bindinput="inputfuc">
</input>
<button name = "button" type="warn" plain="false" loading="false"> 按钮</button>
<view>
<checkbox-group name = "checkbox-group" bindchange = "onchangecheck">
<label>
<checkbox value="java">
java
</checkbox>
</label>
<label>
<checkbox value="c++">
c++
</checkbox>
</label>
<label>
<checkbox value="c">
c
</checkbox>
</label>
</checkbox-group>
</view>
<button form-type="submit"> 提交 </button>
<button form-type="reset">重置 </button>
</form>
画布
https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html
swiper
https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
<swiper indicator-dots="{{indicator}}" autoplay="{{autoplay}}" previous-margin ="{{previous}}">
<block wx:for="{{imagesss}}" wx:key ="*this">
<swiper-item>
<image src="{{item}}" class = "swiper-item"></image>
</swiper-item>
</block>
</swiper>
特殊的覆盖组件
https://developers.weixin.qq.com/miniprogram/dev/component/cover-image.html
https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html
<map>
<cover-view class="coverdata">
hhhh
</cover-view>
</map >
小程序页面导航组件
https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
<navigator url = "/pages/sort/sort" hover-class="navigator-hover" open-type="reLaunch"> 跳转到分类页面</navigator>
小程序常用路由跳转
- wx.navigateTo：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
- wx.switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
- wx.reLaunch：关闭所有页面，打开到应用内的某个页面
- wx.navigateBack： 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。
- wx.redirectTo：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
<view bindtap = "tapNext"> 跳转到2级页面</view>
tapNext:function(){
wx.redirectTo({
url: '/pages/sort/sort',
success:function(e){
console.log(e)
}
})
},
小程序的页面传参和取参。
<navigator url="/pages/sort/sort?id=1&name=aaaa"> 小程序的传递参数</navigator>
onLoad: function (options) {
console.log(options)
},
小程序的底部导航栏
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar
https://developers.weixin.qq.com/miniprogram/dev/extended/weui/tabbar.html
app.json
"tabBar": {
"color": "#000",
"sselectedColor":"#0f0",
"borderStyle":"black",
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
},{
"pagePath": "pages/sort/sort",
"text": "分类"
}]
}
利用require加载js文件
var formate = require("../../utils/util.js")
onLoad:function(options){
var date = new Date()
console.log(date)
var d = formate.formatTime(date)
console.log(d)
}
WXML的模版编写和引入
wxs模块引用。
https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/01wxs-module.html
// 创建wxs文件。
var textStr = "hello world"
var num = function(num1,num2){
return num1+num2;
}
module.exports = {
message:textStr,
add:num
}
//引入wxs
<wxs module = "test" src = "../../wxs/util.wxs">
</wxs>
<view>{{test.message}}</view>
<view>{{test.add(1,11)}}</view>
