逆战--关于微信小程序

微信小程序的常用配置：

全局配置：

//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) => {// 异步操作成功调用resolveresolve(res)},fail: (err) => {// 异步操作失败调用rejectreject(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.prolistnum++;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})}
})