目录
微信小程序入门篇
- 下载微信小程序编辑器:链接
微信小程序文件目录介绍基础篇
- page的页面
- index主页
- index.wxml 写html文件
- index.wxss 写css文件
- index.js 写js文件(data数据、生命周期函数等处理)
- index.json 当前页面的配置文件(配置当前文件的titile等)
"navigationBarTitleText": "测试title"
- index主页
视图容器的介绍基础篇
- view 类似于div标签
- text 类似于span标签
样式介绍基础篇
- index.wxml 文件
<view class="bg1">微信</view>
<view>
<!-- 使用index.js 的数据-->
我是微信2 之 {{ name }}
<text style="color:#ff5">我是text1</text><text>我是text1</text>
</view>
- index.wxss 文件
.bg1 {
background: pink;
}
- index.js 文件
Page({
/**
* 页面的初始数据
*/
data: {
name:"xzl"
},
})
组件介绍基础篇
- 组件
<button plain type="warn" size="mini">按钮</button>
<button disabled size="mini">禁用按钮</button>
<button loading type="primary" size="mini">加载按钮</button>
小程序配置基础篇
- 配置
- navigationBarTitleText 配置当前页面的title
index.json 文件
{
"usingComponents": {},
"navigationBarTitleText": "测试title"
}
生命周期函数篇
应用的生命周期 App.js
- onLaunch
- 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
- onShow
- 当小程序启动,或从后台进入前台显示,会触发 onShow
- onHide
- 当小程序从前台进入后台,会触发 onHide
- onError
- 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
App({
onLaunch: function () {
console.log('app onLaunch');
},
onShow: function (options) {
console.log("app onShow");
},
onHide: function () {
console.log("app onHide");
},
onError: function (msg) {
console.log("app onError");
}
})
页面之中的生命周期函数 eg:index.js
- data
- 页面的data数据
- onLoad
- 页面一加载的时候触发
- onReady
- 监听页面初次渲染完成(页面先加载-显示-最后渲染)
- onShow
- 监听页面显示
- onHide
- 监听页面隐藏(在切后台时,先触发页面的onHide,之后再隐藏app的onHide)
- onUnload
- 监听页面卸载(就是从一个页面跳转到另外页面的时候触发)
注意点:生命周期执行顺序
-
编译的时候
- 先触发 app 的 - onLaunch函数(应用的初始函数)
- app 的 onShow函数 (应用的显示函数)
- page 的 onLoad函数(页面加载函数)
- page 的 onShow函数(页面显示函数)
- page 的 onReady函数(页面初步渲染完成函数)
-
切换后台的时候(从页面切换后台时候如下)
- 先触发 page - onHide函数(页面隐藏函数)
- 再触发 app- onHide函数(应用隐藏函数)
-
后台切换页面时(从后台切换页面时候如下)
- 先触发 app- onShow函数(应用显示函数)
- 再触发 page- onShow函数(页面显示函数)
-
事件:
- onPullDownRefresh
- 监听用户下拉动作
- onShareAppMessage
- 用户点击右上角分享
- onPullDownRefresh
Page({
data: {
name:"xzl"
},
onLoad: function (options) {
console.log("page onLoad");
},
onReady: function () {
console.log("page onReady");
},
onShow: function () {
console.log("page onShow");
},
onHide: function () {
console.log("page onHide");
},
onUnload: function () {
console.log("page onUnload");
},
onPullDownRefresh: function () {
},
onShareAppMessage: function () {
}
})
如何创建新的页面
- 再app.json文件之中创建即可
- 假如你要创建center页面
- 那么就再page下面新增
"pages/center/index"
即可!
- 那么就再page下面新增
- 假如你要创建center页面
{
"pages":[
"pages/index/index",
"pages/center/index"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
小程序的模板语法
data数据的使用与修改
- 在indx.js文件之中定义data数据
- 在index.wxml之中使用data数据
<view> {{ name }} </view>
- 在index.js文件的onLoad函数中 修改 ->
onLoad: function (options) { console.log("page onLoad"); this.setData({ name:'xxzzll' }) },
Page({
data: {
name:"xzl",
},
})
wx:if 与 wx:else的使用
- block为空标签不渲染当前dom元素
<block wx:if="{{flag}}">
<view>{{ flag }}</view>
</block>
<view wx:else="{{flag}}">{{ flag}}</view>
wx:for列表循环
- index.wxml
<view wx:for="{{ list}}" wx:key="index">
<view>{{item.name}} -- {{index }}</view>
</view>
- index.js
Page({
data: {
list:[
{
name:"ppp"
},
{
name:"www"
},
{
name:"ccc"
}
],
},
})