一、小程序开发
1、小程序开发的不同点
- 运行环境不同:小程序是运行在微信环境中
- API不同:小程序无法调用DOM和DOM的API
- 开发环境不同:小程序开发需要开发账号和开发者工具
2、适配方案
- 适配单位:rpx
- 规定任何屏幕下的宽度为750px
- 自动根据屏幕宽度不同计算rpx的大小
- Iphone6下,1rpx = 1物理像素 = 0.5px
二、项目的基本结构
1、整体结构
pages
:用于存放所有的小程序页面utils
:存放所有的工具模块app.js
:整个项目的入口文件,App()必须在app.js中调用,且只能调用一次app.json
:项目的全局配置文件app.wxss
:项目的全局样式文件project.config.json
:项目的配置文件sitemap.json
:配置小程序及其页面是否允许被微信索引
2、小程序页面的组成部分
官方建议将所有的页面都存放在pages文件夹中,以单独的文件夹的形式存在
每个页面文件夹由四个文件组成:
.js文件
:页面的脚本文件,存放页面的数据,时间处理逻辑。Page({}).json文件
:页面的配置文件,配置页面的外观和表现.wxml文件
:页面的模板结构文件.wxss文件
:页面的样式表文件
3、json配置文件
小程序中有四种配置文件,可以对小程序进行不同级别的设置
小程序项目中有四种不同的配置文件,分别是:
- 项目根目录中的
app.json
配置文件{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "Weixin", "navigationBarTextStyle":"black" }, "style": "v2", "sitemapLocation": "sitemap.json" }
- 项目根目录中的
project.config.json
配置文件 -
项目根目录中的
sitemap.json
配置文件 -
每个页面文件夹下的配置文件
三、wxml语法
1、数据绑定
初始化数据
Page({
data: {
message: 'Hello'
}
})
使用数据
<view> {{ message }} </view>
修改数据
1、this.setData
({message
:'修改后的数据', callback
})
2、特点
- 同步修改
- 异步更新
// index.js
Page({
data:{
text: 'init data',
num: 0,
array: [{text: 'init data'}],
object: {
text: 'init data'
}
},
changeText: function(){
// 不要直接修改this.text
this.setData({
text: 'change data'
})
}
})
2、事件绑定
事件分类
- 冒泡事件
- 非冒牌事件
绑定事件
bind绑定
:不会阻止冒泡事件向上冒泡catch绑定
:事件绑定可以阻止事件冒泡
向事件对象传参
- 语法:
data-key=value
- 获取:event.target.dataset.key||event.currentTarget.dataset.key
event.target是触发事件的对象,不一定是绑定事件的对象,例如事件委托/冒泡
currentTarget触发事件的对象一定是绑定事件的对象,没有事件委托
3、列表渲染
- 语法:wx:for='{{arr}}'
- wx:key='{{唯一值}}'
默认的个体:item,默认的下标:index,自定义个体名称:wx:for-item='myItem',自定义下标名称:wx:for-index='myIndex'
4、条件渲染
- wx:if='条件'
- wx:elif='条件'
- wx:else
可以用于判断是否需要渲染某个代码块
wx:if和hidden:
hidden的用法:<view hidden='{{true}}'></view>
hidden是切换元素的显示与隐藏,但是始终加载了元素,wx:if则是判断元素是否进行了加载
5、模板的使用
定义模板
<template name="myTemplate">
<view>
<text>{{index}}:{{msg}}</text>
</view>
</template>
引入模板
<import src='路径'/>
来引入模板结构@import '模板样式路径'
来引入模板样式
使用模板,并且导入数据
<template is="myTemplate" data="{{...item}}"/>
// 定义模板中的数据
Page({
data: {
item: {
index: 0,
msg: 'hello'
}
}
})
6、生命周期
- onLoad():页面加载时触发,一个页面调用一次,可获取页面对应路径的参数query
- onShow():页面显示时触发,会执行多次
- onReady():页面初次渲染时触发,只会调用一次,表示页面准备完成,可以与视图进行交互
- onHide():页面隐藏时触发,例如tab栏的切换或者切换到后台
- onUpload():页面卸载时触发,例如wx.redirectTo或者wx.navigateBack
文章评论