【微信小程序学习笔记03】【如何做到好的复用准备，我的做法如下仅供参考】

目录

这是本人的学习笔记，其中代码或描述若有不足部分敬请指点，万分感谢！

常用到东西（适合前后端分离）

1. 消息提示框Toast
2. 模态对话框Modal
3. 加载中提示框Loading（这个代码短，可以不考虑调用自写的函数复用）
4. 下拉刷新 PullDownRefresh
5. 跳转页面navigatorTo
6. 跨域API链接
7. 获取请求
8. 与微信授权登录相关的(要有回馈的只能放在app。js中如：获取缓存getStorage)都放在app.js

---

准备

在根目录建立两个文件用于放置以上大部分东西

个人习惯用common.js放置常用微信官方API里且无需回馈（回传）信息的API。config.js放置服务器配置

---

参考如下

config.js文件

这个东西很灵活，你要是多服务器也完全ok，同域名即可。假设管理类的我host1设为www.xxx.com/M,服务类我host2设为www.xxx.com/M.还可以减少代码量。到时候调用服务也只需要记住自己的命名，而不需要总是翻看后台已经写好了的API文档。完美

/**
 * 小程序配置文件
 */

// 主机域名xxxxxxxx
var host = 'xxxxxx';

var config = {

  // 接口
  service: { 
    host,
    // 登录地址，用于建立会话 √
    loginUrl: `${host}/ignore/wxLogin`,
    // 判断是否已经绑定手机 √
    judgmentConnectTel: `${host}/wxUser/judgmentConnectTel`,
    // 获取手机验证码 √
    getTelephoneCode: `${host}/wxUser/getTelephoneCode`,
    // 绑定手机号码 √
    connectTelToUser: `${host}/wxUser/connectTelToUser`,

    //【商品相关】
    // 获取商品详细信息 √
    getProductById: `${host}/product/getProductById`,
    // 获取商品评论信息
    getProductCommentByProductId: `${host}/product/getProductCommentByProductId`,

    //【商店相关】
    // 获取商店信息 √
    getShopByShopId: `${host}/shop/getShopByShopId`,
    // 通过商店id获取对应的分类（kind）商品信息列表 √
    getProductKindListByShopId: `${host}/product/getProductKindListByShopId`,
    // 商家商品分类加载更多 √
    getProductListByProductKind: `${host}/product/getProductListByProductKind`,
    ...
    
  }
};

module.exports = config; //以config为这个对象模块出口命名

请求中实际调用config.js中的

index.js

const config = require('../../config')
Page({
	bindCollect(e){
   ...
    wx.request({
      url: config.xxx,
      ...
    })
  },
})

common.js文件

2019/9/27 最近再更新吧。

common.js里的用于复用的函数调用

界面提醒Toast、Modal、Loading、

跳转链接navigatorTo

刷新PullDownRefresh

发起请求

微信授权与登录

---

涉及的核心知识点

---

代码完整下载

---

快捷链接

全部React学习笔记的目录 Click Here>>
全部Javascript学习笔记的目录 Click Here>>
Less学习笔记 Click Here>>
安利一波前端开发推荐使用的工具 Click Here>>
ESLint问题记录 Click Here>>
github各类实战练习源码下载 Click Here>>
如果你觉得我的东西能帮到你，无限欢迎给我的github库点个收藏Star~0v 0~

---