小程序的架构和配置

1 小程序的双线程模型

2 不同配置文件的区分

3 全局配置文件app.json

4 页面配置文件page.json

5 注册App实例的操作

6 注册Page实例的操作

各自的叫法不同

修改project.config.json里面的配置不要直接在该文件里面修改，必须要在编辑器右上角的详情里面修改。除非整体项目需要大家统一某个配置时才在本文件里面修改。（比如修改使用的公共基础库等）

注意：在右上角详情里面修改基础库，默认会被写在project.private.config.json文件里面（私有的、本地的基础库），避免多人开发时候出问题。

sitemap.json文件是设置微信搜索小程序的时候是否允许搜索到你的小程序。比如填了allow，那就搜索得到。disallow就是不允许搜索到。微信爬虫不到小程序。也可以设置小程序某个页面不允许被搜索到。

app.json全局配置文件里面可以配置pages、window、tabBar。其中pages配置注册显示的页面，window控制顶端菜单栏的样式，其中backgroundTextStyle只有两个值，dark和light，想要看见这个颜色想要在全局或者单独页面配置enablePullDownRefresh为true来允许页面下拉刷新。tabbar用来配置底部菜单栏的。
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
单独页面的配置 xxx.json文件

usingComponents用来设置使用自定义的组件的。

navigationBarTitleText可以覆盖掉顶端全局菜单栏的名字，给页面一个单独的菜单栏名字。

enablePullDownRefresh是否允许页面下拉刷新，我们一般不在全局设置这个属性而只在单独页面配置这个属性是因为，不一定所有页面都需要下拉刷新。下拉刷新有个函数进行监听，在该页面的js文件中使用onPullDownRefresh来监听下拉刷新事件。

onReachBottomDistance用来配置页面下拉到距离底部剩余多少距离的时候触发该页面就是文件的onReachBottom事件
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html
app.js文件一般需要编写的内容：

app.jshttps://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html

1、onLaunch是小程序初始化完成时触发，全局只触发一次。这里用法可以判断用户是从什么地方进入的小程序。可以是微信下拉进入小程序，也可以是用户分享的方法进入小程序，还有就是搜索到小程序进入。这些进入方式都有个场景值：

场景值https://developers.weixin.qq.com/miniprogram/dev/reference/scene-list.html

2、监听生命周期

下图是同步的方法存储本地数据（还有异步的方法存储本地数据），可以存储对象类型的数据，和浏览器的不一样，浏览器不能存储对象类型的数据，对象类型数据需要转为字符串类型来存储。
// app.js
App({
  // 作用二: 共享数据
  // 数据不是响应式, 这里共享的数据通常是一些固定的数据
  globalData: {
    token: "",
    userInfo: {}
  },
  onLaunch(options) {
    // 0.从本地获取token/userInfo
    const token = wx.getStorageSync("token")
    const userInfo = wx.getStorageSync("userInfo")

    // 1.进行登录操作(判断逻辑)
    if (!token || !userInfo) {
      // 将登录成功的数据, 保存到storage
      console.log("登录操作");
      wx.setStorageSync("token", "kobetoken")
      wx.setStorageSync("userInfo", { nickname: "kobe", level: 100 })
    }

    // 2.将获取到数据保存到globalData中
    this.globalData.token = token
    this.globalData.userInfo = userInfo


    // 3.发送网络请求, 优先请求一些必要的数据
    // wx.request({ url: 'url'})
  },
  onShow(options) {
    // 作用一: 判断小程序的进入场景
    console.log("onShow:", options);
  },
  onHide() {
    console.log("onHide");
  }
})

// 页面中
// 1.初体验: favor
// 2.页面配置/下拉刷新/上拉加载: profile
// 3.在页面中, 使用app中的数据: order
3、共享一些简单的数据放这里,直接在app（{添加自定义参数名字的json对象来存储共享数据}），但是这里存储的共享（全局）参数是不会触发响应式的，所以通常是用来存储一些固定的参数。

下图为在app（{}）自定义了全局的参数：

下图为在其他的页面中如何使用全局参数：

每个页面对应的xxx.js文件里面的page（{}）一般需要编写的4个内容：

Page(Object object) | 微信开放文档 (qq.com)https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

<view class="banner">
  <swiper circular autoplay indicator-dots="{
    
    {true}}">
    <block wx:for="{
    
    {banners}}" wx:key="acm">
      <swiper-item>
        
        <image mode="widthFix" src="{
    
    {item.image}}"></image>
      </swiper-item>
    </block>
  </swiper>
</view>

<view class="counter">
  <view>当前计数: {
    
    { counter }}</view>
</view>

<view class="buttons">
  <button bindtap="onBtn1Click">按钮1</button>

  <block wx:for="{
    
    {btns}}" wx:key="*this">
    <button 
      class="btn" 
      style="background: {
    
    {item}};"
      bindtap="onBtnClick"
      data-color="{
    
    {item}}"
    >
      {
    
    { item }}
    </button>
  </block>
</view>


<view class="list">
  <block wx:for="{
    
    {30}}" wx:key="*this">
    <view>列表数据:{
    
    { item }}</view>
  </block>
</view>
// pages/01_初体验/index.js
Page({
  data: {
    banners: [],
    recommends: [],

    // 2.作用二: 定义本地固定的数据
    counter: 100,

    btns: ["red", "blue", "green", "orange"]
  },
  // 1.作用一: 发送网络请求, 请求数据
  onLoad() {
    console.log("onLoad");

    // 发送网络请求
    wx.request({
      url: "http://123.207.32.32:8000/home/multidata",
      success: (res) => {
        const data = res.data.data
        const banners = data.banner.list
        const recommends = data.recommend.list
        this.setData({ banners, recommends })
      }
    })
  },

  // 3.绑定wxml中产生事件后的回调函数
  onBtn1Click() {
    console.log("onBtn1Click");
  },
  onBtnClick(event) {
    console.log("btn click:", event.target.dataset.color);
  },

  // 4.绑定下拉刷新/达到底部/页面滚动
  onPullDownRefresh() {
    console.log("onPullDownRefresh");
  },
  //页面下滑到底端的时候触发的事件
  onReachBottom() {
    console.log("onReachBottom");
  },
  //页面滚动的时候触发的事件，这里可以获取滚动到的位置距离顶端的距离
  onPageScroll(event) {
    console.log("onPageScroll:", event);
  },

  // 生命周期函数: 
  onShow() {
    console.log("onShow");
  },
  onReady() {
    console.log("onReady");
  },
  onHide() {
    console.log("onHide");
  },
  onUnload() {
    console.log("onUnload");
  }
})

小程序的架构和配置

猜你喜欢