文章目录
- 新建小程序
- 小程序代码
- app.json
- app.js
- pages/index/index.html
- pages/index/index.js
- pages/index/index.json
- 小程序调试
- App实例的生命周期函数
- onLaunch
- onShow
- onHide
- Page实例的生命周期函数
- onLoad
- onShow
- onReady
- onHide
- 入门例子
- 详细代码
- app.json | app.js
- list.wxml | list.wxss | list.js
- detail.wxml | detail.wxss | detail.js
- 效果
新建小程序
- 新建目录demo
- 打开微信开发者工具创建小程序
目录:选择刚刚新建的目录demo;
AppID:输入开发者ID;
开发模式:选择“小程序”;
后端服务:选中“不使用云服务”
小程序代码
创建的小程序的代码结构如下图左侧所示,但为了说明方便,将logs和utils目录删除,并简单改造了下主要代码文件,如下图右侧所示。
app.json
{
"pages":[
"pages/index/index"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#eee",
"navigationBarTitleText": "weixin",
"navigationBarTextStyle":"black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
小程序的全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多tab等。
本例的app.json中,pages
字段是一个数组,包含了小程序的所有页面路径。其中,数组的第一个元素,也就是第一个页面,就是小程序的默认首页。window
则决定了窗口表现,包括导航栏的背景色、导航栏的文本内容、导航栏的文本样式。
app.js
// app.js
App({
onLaunch(){
console.log("enter app:onLaunch");
}
})
App({})
注册一个应用。
小程序的app.js
中必须调用也只能调用一次App({})
。
整个小程序有且只有一个App实例,各个页面可以通过调用getApp()
访问这个唯一的App实例。
pages/index/index.html
<!--index.wxml-->
<view class="container">
<view class="content">hello world</view>
</view>
pages/index/index.js
// index.js
const app = getApp();
Page({
onLoad(){
console.log("enter pages/index/index:onLoad");
}
})
Page({})
注册一个页面。
pages/index/index.json
{
"navigationBarTitleText": "首页",
"usingComponents": {}
}
页面配置,对本页面(pages/index/index)的窗口表现进行配置。
index.json中的配置项会覆盖app.json的window
中的相同配置项,因此"navigationBarTitleText": "首页"
会覆盖掉{"window":{"navigationBarTitleText":"weixin"}}
,所以窗口的文本内容是"首页",而不是"weixin"。
小程序调试
先简单了解下这两个事物:微信客户端、微信小程序。
可以把微信小程序想象成寄生虫,微信客户端就好比是一个宿主。微信小程序借由微信客户端这个宿主环境才得以实现网页功能。
下面是在微信开发者工具调试小程序的一个过程:
- 进入
app.js
,执行onLaunch
回调; - 进入
pages/index/index.js
,执行onLoad
回调。
小Tip:控制台上打印出 “[sitemap 索引情况提示] 根据 sitemap 的规则[0],当前页面 [pages/index/index] 将被索引”,这是因为sitemap的索引提示是默认开启的,如果想关闭sitemap的索引提示,可以在小程序项目配置文件project.config.json
的settings
中将checkSiteMap
字段配置为false
。
要理解App实例、Page实例的生命周期,关键在于理解小程序的启动流程。
用户点击小程序 到 小程序完成首屏渲染,这个过程就是小程序的启动阶段。
App实例的生命周期函数
// app.js
App({
onLaunch(options){
console.log("enter app:onLaunch");
},
onShow(options){
console.log("enter app:onShow");
},
onHide(options){
console.log("enter app:onHide");
}
})
// index.js
const app = getApp();
Page({
onLoad(){
}
})
onLaunch
小程序启动后会执行App实例的onLaunch
回调
onShow
小程序启动后会执行App实例的onShow
回调;
小程序从后台切换到前台也会执行App实例的onShow
回调。
onHide
小程序从前台切换都后台会执行App实例的onHide
回调
Page实例的生命周期函数
// app.js
App({
onLaunch(options){
console.log("enter app:onLaunch");
},
onShow(options){
console.log("enter app:onShow");
},
onHide(options){
console.log("enter app:onHide");
}
})
// index.js
const app = getApp();
Page({
onLoad(){
console.log("enter pages/index/index:onLoad");
},
onReady(){
console.log("enter pages/index/index:onReady");
},
onShow(){
console.log("enter pages/index/index:onShow");
},
onHide(){
console.log("enter pages/index/index:onHide");
}
})
onLoad
页面加载完成后触发
onShow
页面显示出来后触发;
从后台切换到前台也会触发。
onReady
页面渲染完成后会触发。
onHide
小程序加载首页时,会依次触发
App实例的onLaunch
回调、App实例的onShow
回调、
Page实例的onLoad
回调、Page实例的onShow
回调、Page实例的onReady
回调。
小程序从前台切换到后台,会先触发Page实例的onHide
回调,再触发App实例的onHide
回调。
小程序从后台切换到前台,会先触发App实例的onShow
回调,再触发Page实例的onShow
回调。
入门例子
本例原型和图片素材均来自腾讯官网
详细代码
app.json | app.js
{
"pages":[
"pages/list/list",
"pages/detail/detail"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#87CEFA",
"navigationBarTitleText": "HelloWorld",
"navigationBarTextStyle":"white"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
//app.js
App({
})
list.wxml | list.wxss | list.js
<!-- list.wxml -->
<view class="list">
<view class="item"
wx:for="{{items}}"
wx:key="id"
id="{{item.id}}"
catchtap="handleTap">
<image class="logo-pic" src="{{item.url}}" />
<text>{{item.title}}</text>
</view>
</view>
/* list.wxss */
.logo-pic{
width: 128rpx;
height: 128rpx;
}
.list{
display: flex;
justify-content: space-around;
}
.item{
display: flex;
flex-direction: column;
align-items: center;
}
.item:hover{
cursor: pointer;
}
// list.js
Page({
data:{
items:[
{id:"WeChat",title:"微信",url:"../../imgs/WeChat.png"},
{id:"QQ",title:"QQ",url:"../../imgs/QQ.png"},
{id:"QQZone",title:"QQ空间",url:"../../imgs/QQZone.png"}
]
},
handleTap:function(e){
wx.navigateTo({ url: '../detail/detail?id='+e.currentTarget.id });
}
})
detail.wxml | detail.wxss | detail.js
<!-- detail.wxml -->
<view class="detail">
<view>
<image class="logo-pic" src="{{imgUrl}}"/>
</view>
<view class="msg-box">
<view class="name">{{name}}</view>
<view class="label">{{label}}</view>
<view class="desc">{{desc}}</view>
</view>
</view>
/* detail.wxss */
.detail{
display: flex;
}
.logo-pic{
width: 256rpx;
height: 256rpx;
}
.name{
font-size: 30px;
color: #2A2E2E;
margin-bottom: 10px;
}
.label{
font-size: 20px;
color: #949696;
border-bottom: 1px solid #E9ECF0;
margin-bottom: 10px;
padding-bottom: 5px;
}
.msg-box{
margin: 8px 15px 0 5px;
}
.desc{
font-size: 14px;
color:#5F6464
}
// details.js
const details = {
"WeChat":{
name:"微信",
label:"微信是一种生活方式",
desc:"自2011年推出以来,微信作为全国拥有最大用户群体的通信社交平台,为数以亿计的用户带来生活的便捷与乐趣。它不仅支持发送语音、视频、图片和文字,同时将实时通信与社交资讯、生活服务相结合。“朋友圈”、“微信公众号”、“微信小程序”、“微信支付”,为满足用户不断新增的需求,微信不断加入种种创新功能,致力为用户提供优越的移动数字生活体验。"
},
"QQ":{
name:"QQ",
label:"每一天,乐在沟通",
desc:"QQ,由腾讯公司于1999年推出。作为一款横跨PC和移动的即时通信和社交平台,QQ支持在线聊天、视频语音通话、点对点断点续传文件、QQ邮箱等多种功能,并不断推出符合年轻用户需求的创新功能,例如支持用户根据个人需求和兴趣快速扩关系的“扩列”以及精准匹配用户兴趣的内容社交平台“看点”等。此外,腾讯亦提供提升企业工作效率的TIM(办公版QQ)。截至2020年3月,QQ月活跃用户(包括PC和移动)为7.68亿。"
},
"QQZone":{
name:"QQ空间",
label:"分享生活,留住感动",
desc:"QQ空间是支持用户和亲友进行分享互动的社交平台,满足用户展示、交流和娱乐的需求,随时随地分享生活。在QQ空间上,用户可以通过多种功能实现自我表达,如日志、说说、分享、相册、视频、留言板、音乐盒、个人档等。此外,用户还可根据个人喜好设定空间装饰,打造个人特色。QQ空间提供的第三方网站和第三方应用接入,可以更好的为用户提供个性化服务。"
}
}
Page({
data:{
imgUrl:"",
name:"",
label:"",
desc:""
},
onLoad:function(option){
const {id} = option;
const imgUrl = `../../imgs/${id}.png`;
const {name,label,desc} = details[id];
// this.setData({
// imgUrl,
// name,
// label,
// desc
// })
this.setData({
imgUrl,
name,
label,
desc
},function(){
console.log("updated!")
})
}
})
效果