一、安装
1、在https://developers.weixin.qq.com/miniprogram/dev/下载微信开发者工具
2、打开进入,选择项目目录
3、目录结构
app.js:入口文件
app.json:在里面注册页面后,会自动生成页面文件,当编译时默认打开pages下的第一个页面
二、使用
1、数据绑定
<text>{{ text }}</text> // first.wxml中,用{{}}来绑定
<button type="default" > default </button>
<button type="primary" bindtap="btnClick"> primary </button> // bindtap是绑定事件
data: { // first.js中
text: "this is a text" // 绑定text
},
btnClick: function () { // 注册点击事件
this.setData({text: "按钮被点击了"})
},
2、条件渲染
<view wx:if="{{ isShow }}">this is a</view> // 当isShow==true的时候显示
<view wx:else="{{ isShow }}">this is b</view>
<view wx:for="{{ news }}"> // 遍历数组,
{{ index }}--{{ item }} // 下标和值,默认为index和item,修改使用wx:for-item="itemx" wx:for-index="idx"
</view>
data: {
text: "this is a text",
isShow: true,
news: ['aaa', 'bbb', 'ccc']
},
btnClick: function () {
var show = this.data.isShow;
this.setData({ text: "按钮被点击了", isShow: !show})
},
3、模板的使用:新建一个目录命名templates(随便取),新建header.wxml,footer.wxml
(1)使用include
在所需要使用的地方
<include src="../template/header" /> // 必须要有闭标签/>
header.wxml中
<text>this is a header</text>
(2)使用import:当模板中使用template标签,便不能使用include引入
<import src="../template/footer" />
<template is="name1" data="{{ t: 'data' }}" /> // 用来指定那个模板,is是模板name值,data是在模板中通信
footer.wxml
<template name="name1">this is name1--{{ t }}</template>
<template name="name2">this is name2</template>
4、事件
(1)点击事件:tap
(2)长按事件:longtap
(3)触摸事件:touchstart:开始 touchend:结束 touchmove:移动 touchcancel:结束,非正常结束,比如点下去突然来个电话,触摸事件被打断
(4)其他:submit input
(5)事件绑定:
1)bind绑定:会冒泡
2)catch绑定:不会冒泡
5、小程序配置详解
(1)页面配置app.json下的pages
"pages":[
"pages/first/first", // 第一个为默认编译的首页
"pages/index/index",
"pages/logs/logs"
],
(2)页面配置app.json下的window
"window":{
"backgroundTextStyle":"light", // 背景文本颜色
"navigationBarBackgroundColor": "#fff", // 导航条背景颜色
"navigationBarTitleText": "WeChat", // 导航条标题内容
"navigationBarTextStyle":"black" // 导航条字体颜色
}
(3)底部菜单
"tabBar": {
"list": [
{
"pagePath": "pages/index/index", // 如果pages中的第一个路径不在tabBar中,tabBar不会显示
"text": "首页"
},
{
"pagePath": "pages/logs/logs",
"text": "日志"
}
]
}
(3)请求超时
"networkTimeout": {
"request": 10000, // http请求10秒
"downloadFile": 10000 // 下载文件10秒
},
(4)debug
"debug": true // 会输出一些日志
(5)页面配置,在每个页面里面新建一个与页面同名的json文件,目的是:覆盖app.json中的全局配置
6、小程序生命周期app.js中:onLaunch():在开始 onShow():前台运行 onHide():后台运行
7、页面跳转
(1)使用wx.navigateTo
redirect: function () {
wx.navigateTo({
url: '../first/first' // 注意:这里的url不能出现在底部菜单中,否则不会跳转
})
},
或者使用wx.redirectTo区别:navigateTo不关闭页面打开新的,redirectTo关闭页面
(2)使用组件
<navigator url="/pages/first/first?id=1&title=标题">切换 Tab</navigator> // 也可以加open-type="redirect"
(3)传递数据
wx.navigateTo({
url: '../first/first?id=1'
})
// first.js
onLoad: function (options) {
console.log(options.id)
},
三、实现登录:如果用户信息不存在,跳转到登录页面,否则进入用户信息页
//app.js
globalData: {
userInfo: null
}
// pages/user/user.js
var app = getApp()
onLoad: function (options) {
if (app.globalData.userInfo == null) { // 如果没有用户信息,去登录页
wx.redirectTo({
url: '/pages/login/login'
})
} else {
this.setData({username: app.globalData.userInfo.username})
}
},
// 登录页
<input bindinput="usernameInput" />
<input bindinput="passwordInput" password="true" />
<button bindtap="login">登录</button>
// app.js
data: {
username: null,
password: null
},
usernameInput: function (event) {
this.setData({username: event.detail.value})
},
passwordInput: function (event) {
this.setData({password: event.detail.value})
},
login: function () {
// 做验证之后
app.globalData.userInfo = {username: this.data.username, password: this.data.password}
wx.switchTab({
url: '/pages/user/user' // 因为底部菜单有这个路由,所以不能用navigateTo或redirectTo
})
},
四、布局
1、flex布局
<view class="contain">
<view class="item">1</view>
<view class="item">2</view>
<view class="item">1</view>
</view>
.contain {
width: 100%;
height: 100%;
background: red;
display: flex;
flex-direction: row; /*水平排列,默认为row,垂直排列为column*/
flex-wrap: wrap; /*当一行排不开时换行,默认为nowrap不换行*/
/* flex-flow: row wrap; 简写*/ /* align-items:center在纵轴上垂直 */
justify-content: space-between; /*对齐方式,居中对齐,默认flex-start左对齐,flex-end右对齐,space-around有左右margin值,space-between第一个没有左边距最后一个没有右边距*/
}
.item {
width: 100rpx; /*rpx会根据不同的分辨率,解析不同的大小*/
height: 100rpx;
background: blue;
border: 1px solid #fff;
flex-grow: 1; /*当元素空间足够时,放大占据1,默认0不放大*/
flex-shrink: 1; /*当空间不够时,会缩小,默认为1*/
flex-basis: 200rpx; /*占据的宽度,本来为100rpx,现在是200rpx*/
/* flex: 1 1 50rpx; 上面三个的简写*/
}
2、相对定位和绝对定位
五、小程序的api
1、wx.request():发送请求
2、图片选择和调用微信拍照:wx.chooseImage()
3、上传文件:wx.uploadFile() 下载文件:wx.downloadFile()
4、数据缓存:wx.setStorage():异步 wx.setStorageSync():同步
5、获取地理位置:wx.getLocation() wx.chooseLocation():选择位置
6、获取网络类型:wx.getNetworkType()
7、获取系统信息:wx.getSystemInfo()
8、操作反馈:wx.showToast():信息弹窗 wx.showModal():确认弹窗 wx.showActionSheet():在底部出现信息框
wx.showLoading():加载弹窗