1.1注册小程序账号
1.2下载微信开发者工具
https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html
2.1新建页面
在app.json中添加页面,保存后会自动添加页面
"pages": [
"pages/list/list",
"pages/index/index",
"pages/logs/logs"
],
2.2view组件的基本使用:
<!--pages/list/list.wxml-->
<text>pages/list/list.wxml</text>
<view class="container1">
<view>A</view>
<view>B</view>
<view>C</view>
</view>
/* pages/list/list.wxss */
.container1 view{
width:100px;
height:100px;
text-align:center;
line-height:100px;
}
.container1 view:nth-child(1){
background-color: lightgreen;
}
.container1 view:nth-child(2){
background-color: lightskyblue;
}
.container1 view:nth-child(3){
background-color: lightpink;
}
.container1{
display: flex;
justify-content: space-around;
}
2.2scroll-view的基本使用
<!--pages/list/list.wxml-->
<text>pages/list/list.wxml</text>
<scroll-view class="container1" scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>
<scroll-view class="container2" scroll-x>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>
/* pages/list/list.wxss */
.container1 view{
width:100px;
height:100px;
text-align:center;
line-height:100px;
}
.container2 view{
width:100px;
height:100px;
text-align:center;
line-height:100px;
display: inline-block;
}
.container1 view:nth-child(1){background-color: lightgreen;}
.container1 view:nth-child(2){background-color: lightskyblue;}
.container1 view:nth-child(3){background-color: lightpink;}
.container2 view:nth-child(1){background-color: lightgreen;}
.container2 view:nth-child(2){background-color: lightskyblue;}
.container2 view:nth-child(3){background-color: lightpink;}
.container1{
border: 1px solid red;
width: 100px;
height: 120px;
}
.container2{
white-space: nowrap;
border: 1px solid red;
width: 120px;
height: 100px;
}
2.3swiper的基本使用
<swiper class="swiper-container" indicator-dots>
<swiper-item>
<view class="item">A</view>
</swiper-item>
<swiper-item>
<view class="item">B</view>
</swiper-item>
<swiper-item>
<view class="item">C</view>
</swiper-item>
</swiper>
.swiper-container{
height:150px;
}
.item{
height: 100%;
line-height: 150px;
text-align: center;
}
swiper-item:nth-child(1) .item {background-color: lightgreen;}
swiper-item:nth-child(2) .item {background-color: lightskyblue;}
swiper-item:nth-child(3) .item {background-color: lightpink;}
swiper常用属性
2.4 text和rich-text组件
通过text组件的selectable属性,实现长按选中文本内容效果。
<text selectable>长按选中</text>
通过 rich-text 组件的nodes属性节点,把HTML字符串渲染为对应的UI 结构:
<rich-text nodes="<h1 style='color:red;'>标题</h1>"></rich-text>
2.5button组件
<button>默认按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
<button size="mini">默认按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>
<button size="mini" plain>默认按钮</button>
<button type="primary" size="mini" plain>主色调按钮</button>
<button type="warn" size="mini" plain>警告按钮</button>
2.5 image组件
image 组件的 mode 属性用来指定图片的裁剪和缩放模式,常用的 mode 属性值如下:
<image src="/image/1.png" mode="widthFix"></image>
3.1数据绑定
在页面对应的.js文件中,吧数据定义到data对象中即可,在页面.wxml中使用Mustache语法(插值语法)渲染绑定的数据。
绑定内容:
data: {
info:'hello world'
},
<view>{{info}}</view>
绑定属性:
data: {
imgSrc:'/image/1.png'
},
<image src="{{imgSrc}}"></image>
三元运算:
data: {
randomNum:Math.random()*10
},
<view>{{randomNum >= 5 ? '大于等于5':'小于5'}}</view>
算数运算:
data: {
randomNum:Math.random().toFixed(2)
},
<view>{{randomNum * 100}}</view>
3.2事件绑定
事件对象event的属性
3.2.1bindtap的语法格式
<button bindtap="btnTapHandler">按钮</button>
Page({
btnTapHandler(e){
console.log(e);
},
})
3.2.2data中的数据赋值
调用this.setData方法
<button bindtap="btnTapHandler">+1</button>
Page({
data: {
count:0
},
btnTapHandler(e){
this.setData({
count:this.data.count+1
})
},
})
3.2.3事件传参
可以为组件提供"data-*"自定义属性传参,其中*是参数的名字
在事件处理函数中,通过 event.target.dataset.参数名 即可获取到具体参数的值
<button bindtap="btnTapHandler" data-info="{{2}}">传参</button>
btnTapHandler(e){
console.log(e.target.dataset.info);
},
3.2.4bindinput的语法格式
<input bindinput="inputHandler"/>
inputHandler(e){
console.log(e.detail.value);
},
3.2.5实现文本框和data之间的数据同步
<input value="{{msg}}" bindinput="inputHandler"/>
input{
border:1px solid #eee;
padding: 5px;
margin: 5px;
border-radius: 3px;
}
data: {
msg:"你好,"
},
inputHandler(e){
this.setData({
msg:e.detail.value
})
},
4.1条件渲染
使用wx:if="{{condition}}"来判断是否要渲染该代码块,也可以使用wx:elif和wx:else来添加判断
<view wx:if="{{type===1}}">男</view>
<view wx:elif="{{type===2}}">女</view>
<view wx:else>保密</view>
结合<block>一次性控制多个组件的展示与隐藏
<block wx:if="{{true}}">
<view>view1</view>
<view>view2</view>
</block>
4.2 hidden
直接使用hidden="{{condition}}"也能控制元素的展示与隐藏
<view hidden="{{false}}">hiddden</view>
wx:if 与 hidden 的对比
- 运行方式不同
wx:if 以动态创建和移除元素的方式,控制元素的展示与隐藏
hidden 以切换样式的方式(display: none/block;),控制元素的显示与隐藏 - 使用建议
频繁切换时,建议使用 hidden
控制条件复杂时,建议使用wx:if搭配wx:elif、wx:else 进行展示与隐藏的切换
4.3列表渲染
通过 wx:for 可以根据指定的数组,循环渲染重复的组件结构
<view wx:for="{{arr1}}">
索引是:{{index}},item项是:{{item}}
</view>
data: {
arr1:['浙江','上海','北京']
},
使用wx:for-index以指定当当前循环项的索引的变量名;使用wx:for-item可以指定当前项的变量名
<view wx:for="{{arr1}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}---{{itemName}}
</view>
小程序在实现列表渲染时,建议为渲染出来的列表项指定唯一的 key 值,从而提高渲染的效率(指定key时不用加大括号)
<view wx:for="{{userList}}" wx:key="id">
{{index}}---{{item.id}}:{{item.name}}
</view>
userList:[
{id:1,name:'小红'},
{id:2,name:'小明'},
{id:3,name:'小白'},
]
5.1wxss模板样式
rpx尺寸单位:鉴于不同设备屏幕的大小不同,为了实现屏幕的自动适配,rpx把所有设备的屏幕,在宽度上等分为 750 份(即:当前屏幕的总宽度为750rpx)
使用wxss提供的@import语法,可以导入外联的样式表
5.2全局配置文件
window节点常用配置项
"window": {
"navigationBarTitleText": "Weixin",
"navigationBarBackgroundColor": "#fff",
"navigationBarTextStyle": "black",
"enablePullDownRefresh": true,
"backgroundColor": "#eee",
"backgroundTextStyle": "dark",
"onReachBottomDistance": 50
},
也可以在每个页面的json文件中设置,直接写属性和属性值
5.3 tabBar
tabBar的6个组成部分:
backgroundColor:tabBar 的背景色
selectedlconPath:选中时的图片路径
borderStyle:tabBar 上边框的颜色
iconPath:未选中时的图片路径
selectedColor:tab上的文字选中时的颜色
color:tab 上文字的默认(未选中)颜色
tabBar节点的配置项:
每个tab项的配置选项:
在app.json中:
"tabBar":{
"list":[
{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "/images/tabs/home.png",
"selectedIconPath": "/images/tabs/home-active.png"
},
{
"pagePath": "pages/message/message",
"text": "消息",
"iconPath": "/images/tabs/message.png",
"selectedIconPath": "/images/tabs/message-active.png"
}
]
},
6.1 网络数据请求
出于安全性方面的考虑,小程序官方对数据接口的请求做出了如下两个限制:
- 只能请求 HTTPS 类型的接口
- 必须将接口的域名添加到信任列表中
getInfo(){
wx.request({
url: 'https://www.****.cn/api/get',
method:'GET',
data:{
name:'zs',
age:20
},
success:(res)=>{
console.log(res);
}
})
},
由于小程序的宿主环境是微信客户端,不是浏览器,所以小程序中不存在跨域的问题,也不能叫Ajax请求,而叫发起网络数据请求。