逆战--关于微信小程序

微信小程序的常用配置：

全局配置：

//app.json:
{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/index",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true,
  "navigateToMiniProgramAppIdList": [
    "wxe5f52902cf4de896"
  ]
}
​

pages：

用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。文件名不需要写文件后缀，框架会自动去寻找对于位置的 .json, .js, .wxml, .wxss 四个文件进行处理；

window:

用于设置小程序的状态栏、导航条、标题、窗口背景色。如：

navigationBackgroundColor:"#fff", 导航栏背景颜色

navigationBarTextStyle:"white", 导航栏标题颜色，仅支持 black / white

navigationBarTitleText:" hello"，导航栏标题文字内容

navigationStyle："default" 导航栏样式，仅支持以下值：default默认样式custom` 自定义导航栏，只保留右上角胶囊按钮。

backgroundColor:"#ccc"窗口的背景色

enablePullDownRefresh：false 是否开启全局的下拉刷新。

onReachBottomDistance: 100 页面上拉触底事件触发时距页面底部距离，单位为 px。

tabBar:

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。具体属性如下：

color:"#fff" tab 上的文字默认颜色，仅支持十六进制颜色

selectedColor: "#f66" tab 上的文字选中时的颜色，仅支持十六进制颜色

backgroundColor:"#ccc" tab 的背景色，仅支持十六进制颜色

borderStyle:"white" tabbar 上边框的颜色， 仅支持 black/ white

list:[] tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab

list中的属性：

pagePath:"" 页面路径，必须在 pages 中先定义

text: "" tab 上按钮文字

iconPath:"" 图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。

selectedIconPath:"" 选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。

networkTimeout:

各类网络请求的超时时间，单位均为毫秒。

 

request: 60000 wx.request 的超时时间，单位：毫秒。

connectSocket: 60000 wx.connectSocket 的超时时间，单位：毫秒。

uploadFile: 60000 wx.uploadFile 的超时时间，单位：毫秒。

downloadFile: 60000 wx.downloadFile 的超时时间，单位：毫秒。

debug:

可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有 Page 的注册，页面路由，数据更新，事件触发等。可以帮助开发者快速定位一些常见的问题

navigateToMiniProgramAppIdList:

当小程序需要使用 wx.navigateToMiniProgram 接口跳转到其他小程序时，需要先在配置文件中声明需要跳转的小程序 appId 列表，最多允许填写 10 个。

permission:

小程序接口权限相关设置。字段类型为 Object，结构为：

scope.userLocation:{} 位置相关权限声明;

页面配置：

每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。如下，配置的属性同全局配置的基本一致；

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

sitmap配置：

小程序根目录下的 sitemap.json 文件用来配置小程序及其页面是否允许被微信索引。如：

{
  "rules":[{
    "action": "allow",
    "page": "*"
  }]
}

小程序中的实用功能：

1.封装wx.request函数：

export function request (options) {
  // 解构赋值 ---  获取用户传递的参数信息
  const { url, data,method} = options;
  // 加载动画 
  wx.showLoading({
    title: '加载中',
  })
  // 核心点 异步 A方法请求，B方法调用
  // 回调函数、promise、generator + yield、async+await
​
  return new Promise((resolve, reject) => {
    wx.request({
      url: baseUrl + url,
            method: method || "GET"
      data: data || {},
      success: (res) => {
        // 异步操作成功调用resolve
        resolve(res)
      },
      fail: (err) => {
        // 异步操作失败调用reject
        reject(err)
      },
      complete: () => {
        wx.hideLoading()
      }
    })
  })
}

2.开启下拉刷新

首先开启首页的下拉刷新功能

pages/home/home.json

{
  "enablePullDownRefresh": true,
}

完善相关的下拉刷新函数

pages/home/home.js

// pages/home/home.js
import { request } from './../../utils/index.js'
Page({
​
  data: {
    prolist: [],
    pageCode:1
  },
  onLoad: function (options) {
  
    })
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    request('***').then(data => {
      this.setData({
        prolist: data.data,
        pageCode:1
      })
    })
  },
  }

3.上拉加载功能

/**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    let num = this.data.pageCode;
    let prolist = this.data.prolist
    num++;
    request('***', {
      pageCode: num
    }).then(data => {
      // 此处注意临界值的变化 --  没有数据
      this.setData({
        prolist: [...prolist, ...data.data],
        pageCode: num
      })
    })
  }
})

4.返回顶部功能

在首页中设置一个固定定位的按钮，然后绑定点击事件，绑定事件使用 bindtap，然后调用小程序提供的api即可返回

// pages/home/home.wxml
<view class="backtop" bindtap="backtop"> ↑ </view>
​
// pages/home/home.wxss
.backtop {
  position: fixed;
  bottom: 10px;
  right: 8px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 18px;
  text-align: center;
  line-height: 30px;
}
​
// pages/home/home.js
Page({
  /**
   * 自定义函数
   */
  backtop: function () {
    // 小程序api 的界面 - 滚动
    wx.pageScrollTo({
      scrollTop: 0,
      duration: 300
    })
  }
})