【微信小程序】开发入门(上)

新建小程序

• 新建目录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"。

小程序调试

先简单了解下这两个事物：微信客户端、微信小程序。
可以把微信小程序想象成寄生虫，微信客户端就好比是一个宿主。微信小程序借由微信客户端这个宿主环境才得以实现网页功能。
下面是在微信开发者工具调试小程序的一个过程：

1. 进入app.js，执行onLaunch回调；
2. 进入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!")
        })
    }
})

效果