一、开发前的准备工作
1.申请AppID:一个账号对应一个小程序,个人/个体只能申请5个小程序
2.下载开发工具
二、小程序的文件结构
三、
1.数据绑定
1.1数据的设置
Page(
data:{
name:'name',
age:18}
)
page.js的内容
1.2数据的调用
{{name}}
{{age}}
page.wxml
2.列表的渲染
2.1数据的设置
Page(
data:{
stundents:[
{id:1,name:'alxes',age:11},
{id:2,name:'alxes',age:12},
{id:3,name:'alxes',age:13}
]
}
)
page.js
2.2数据的调用
{{item.id}}{{item.name}}item.age
page.wxml
除了item之外,还有index内置的参数,标识条目的位置
3.事件的监控
3.1事件的定义
Page(
data:{
counter:0}
handleEvent(){this.setDate({
counter:this.data.counter+1})
}
)
page.js
3.2事件的引用
按钮
四、小程序的配置
1.project.config.json:项目配置文件,比如项目名称,appid
2.sitemap.json:小程序搜索相关
属性
类型
必填
描述
pages
string[]
是
页面路径列表
window
Object
否
全局默认窗口表现
tabBar
Object
否
底部tab栏表现,底部导航栏
3.1tabBar设置
"tabBar": {"list": [
{"pagePath": "pages/index/index","text": "首页","iconPath": "/img/sy.jpg","selectedIconPath": "/img/sy_active.jpg"},
{"pagePath": "pages/classify/classify","text": "首页","iconPath": "/img/fl.jpg","selectedIconPath": "/img/fl_active.jpg"}
]
}
底部分页栏
4.page.json:页面配置
页面中的配置选项回覆盖app.json中的windows中相同的配置选项
五、页面的生命周期(.js文件中)
Page({/**
* 页面的初始数据*/data: {
},/**
* 生命周期函数--监听页面加载*/onLoad:function(options) {
},/**
* 生命周期函数--监听页面初次渲染完成*/onReady:function() {
},/**
* 生命周期函数--监听页面显示*/onShow:function() {
},/**
* 生命周期函数--监听页面隐藏*/onHide:function() {
},/**
* 生命周期函数--监听页面卸载*/onUnload:function() {
},/**
* 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh:function() {
},/**
* 页面上拉触底事件的处理函数*/onReachBottom:function() {
},/**
* 用户点击右上角分享*/onShareAppMessage:function() {
}
})
生命周期示例
六、基本组件介绍
1.text组件
1
2
3 文本组件
4
5
6
7 文本可以被选择
8
9
10
11 中文字 符空格一半大小
12 中文字 符空格大小
13 根据字 体设置的空格大小
14
15
16
17 是否解码
18
使用说明
2.button组件
这是个按钮
mini属性的按钮
primary属性的按钮
default属性的按钮
warn属性的按钮
plain属性的按钮
disalbe属性的按钮
使用说明
3.view组件
4.img组件
选中图片
基本使用
data: {
imagePath:''},
handleChooseAlbum(){//系统API,让用户在相册中选择图片或拍照
wx.chooseImage({
success: (res)=>{//路径
const path = res.tempFilePaths[0]this.setData({
imagePath : path
})
},
})
}
相册功能
5.input组件:输入框
6.scroll-view组件
{{item}}
{{item}}
设置方法wxml文件
/*设置横向滑动*/.contailner1{
background: purple;
white-space: nowrap;
}
.item1{
width: 100px;
height: 100px;
background: red;
margin: 10px;
display: inline-block;
}/*设置竖向滑动*/.contailner2{
background: orange;
height: 200px;
margin-top: 20px;
}
.item2{
height: 100px;
background: blue;
margin:10px;
}
样式设置方法wxss文件
七、共同属性
属性
描述
注释
id
组件的唯一标识
整个页面的唯一标识
class
组件的样式表
在对应的wxss中定义的样式表
style
组件的内联样式
可以动态设置内联样式
hidden
组件是否显示
所有组件默认显示
data-*
自定义属性
组件上触发的事件十,会发送给事件处理的函数
bind*/cath*
组件的事件
八、支持的选择器
九、wxss的尺寸单位
1.使用rpx,可根据屏幕宽度进行自适应,建议做布局设置以iPhone6为实例。
十、引入wxss文件的方法
@import '引入文件的路径';
十一、官方样式库
十二、must语法
1.引入变量 {{message}}
2.变量判断{{age >=18 ? '成年人' : '未成年人'}}
3.bloot变量判断哈哈
isActive : false
十三、条件判断
ha
= 90 }}">优秀
= 80 }}">l良好
= 60 }}">及格
及格
代码实例
在某些情况下,我们需要使用wx:if或者wx:for是,可能需要包裹一组组件标签,这时候需要使用block标签,block不是组就按,仅用来包装元素
电影序号:{{index}}
电影名称:{{item}}
电影序号:{{index}}
电影名称:{{item}}
代码示例
item、index起名字
{{movie1}}-{{i}}
十四、模板的使用
哈哈
哈哈1
示例
十五、wxs
//JS代码
var message = "hello word";var name = "coderwhy";var sum = function(num1,num2){return num1 +num2
}//模块数据导出
module.exports ={
message : message
name : name
sum : sum
}
{{info.message}}
{{info.name}}
{{sum(20,30)}}
示例
十六、常见的事件类型
input : bindinput bindblur bindfocus
scroll-view : bindscrolltowpper/bindscrolltolower
1.比较常见的事件类型
类型
触发条件
touchstart
手指触摸动作开始
touchmove
手指触摸后移动
touchcancel
手指触摸动作被打断
touchend
手指触摸动作结束
tap
手指触摸后马上离开
longpress
手指触摸后,超过350ms在离开,如果指定了事件回调函数,并触发这个事件,tap事件将不被触发
longtap
手指触摸后,超过350ms在离开
2.事件对象
属性
说明
type
事件类型
timeStamp
页面打开到触发事件所经过的毫秒数
target
触发事件的组件的一些属性值组合
currentTarget
当前组件的一些属性值集合
detail
额外的信息
touches
触摸事件,当前停留在屏幕中触摸点信息的数组
changedTouches
触摸事件,当前变化的触摸点信息的数组
3.事件冒泡和事件捕获
3.1 bind一层层传递
3.2 catch 阻止事件进一步传递
十九、自定义组件
自定义组件同样是由4个文件组成,建立一个公共的目录,使用自定义组件
1
2
3
4 {5 "usingComponents": {6 "my-cpn":"路径"
7 }8 }9
10
11 Component({12 properties:{13 title:{14 type:String,15 value:'默认值'
16 }17 }18 })19
20
组件的使用方法
1.组件传递样式
Component({
externalClasses:['titileclass']
})
引用
组件传递内容
组件传递方法
组件修改数据
二十、插槽
插槽同样是4个文件组成,使用slot标签
槽的定义
同样插槽需要注册,才可以引用,注意需要在插槽的js文件中,引入下列内容
Component({
options:{
multipleSlots :true}
})
插槽的js文件中引入
二十一、Component构造器
properties:定义传入的属性
data:定义内部属性
methods:定义方法
options:额外配置选项
externalClasses:引入外部样式
observers:属性和数据监听
pageLifetimes:页面生命周期
lefetimes:组件生命周期
二十二、网络请求
wx.request封装
二十三、展示弹窗API
showToast
showModal
showLoading
showActionSheet