文章目录
新建小程序小程序代码app.jsonapp.jspages/index/index.htmlpages/index/index.jspages/index/index.json
小程序调试App实例的生命周期函数onLaunchonShowonHide
Page实例的生命周期函数onLoadonShowonReadyonHide
入门例子详细代码app.json | app.jslist.wxml | list.wxss | list.jsdetail.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({
onLaunch(){
console
.log("enter app:onLaunch");
}
})
App({})注册一个应用。 小程序的app.js中必须调用也只能调用一次App({})。 整个小程序有且只有一个App实例，各个页面可以通过调用getApp()访问这个唯一的App实例。
pages/index/index.html
<view class="container">
<view class="content">hello world
</view>
</view>
pages/index/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({
onLaunch(options
){
console
.log("enter app:onLaunch");
},
onShow(options
){
console
.log("enter app:onShow");
},
onHide(options
){
console
.log("enter app:onHide");
}
})
const app
= getApp();
Page({
onLoad(){
}
})
onLaunch
小程序启动后会执行App实例的onLaunch回调
onShow
小程序启动后会执行App实例的onShow回调； 小程序从后台切换到前台也会执行App实例的onShow回调。
onHide
小程序从前台切换都后台会执行App实例的onHide回调
Page实例的生命周期函数
App({
onLaunch(options
){
console
.log("enter app:onLaunch");
},
onShow(options
){
console
.log("enter app:onShow");
},
onHide(options
){
console
.log("enter app:onHide");
}
})
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({
})
list.wxml | list.wxss | list.js
<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>
.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
;
}
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
<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{
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
}
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
},function(){
console
.log("updated!")
})
}
})
效果
