2021-09-28-【小程序】小程序开发-环境篇

小程序开发基础

一、环境准备

1. 小程序开发账号申请

2. 开发环境准备：微信小程序开发工具（建议稳定版）

二、项目创建

打开微信小程序开发工具，点击 新建小程序


• 文件类型说明

WXML：类似VUE 中的 template模板

是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构（常用标签 类似 div，用于页面布局，标签 用于文字展示）

WXSS：类似.css 文件，样式不能嵌套编写，尺寸单位建议全部使用rpx，包括字体大小

rpx（尺寸单位）: 自适应单位，目前按 iPhone6 作为视觉稿的标准，规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

WXS

VUE中的filters可用WXS替代，但存在很多限制。

三、UI组件库选型

小程序原生开发中自带部分基础组件，以满足日常开发需求；但仍需要额外的扩展组件以填充复杂系统的开发工作，这里选用官方推荐的 weui 组件库，需自建项目单独引入。

引入组件库

1. 通过 useExtendedLib 扩展库 的方式引入，这种方式引入的组件将不会计入代码包大小。
2. 可以通过npm (opens new window)方式下载构建，npm包名为weui-miniprogram

引入组件

这里通过npm方式引入组件库

pages/xxx页面/xxx页面.json 中引入需要的组件，如下：

{
  "usingComponents": {
    "mp-cells": "weui-miniprogram/cells/cells",
    "mp-cell": "weui-miniprogram/cell/cell",
  },
}

四、网络请求

1. 普通网络请求

2. 资源上传请求

request.js

1. 支持get/post/put/delete 类型请求
2. 对创建类型接口（create）进行多次请求拦截

let app = getApp();

// 1s内重复调用 同一个接口，直接返回，不调用接口
let lastRequestUrl;
let sameRequestTimeOut;
let sameRequestLimitSecond = 2000;

const request = (url, options) => {
  return new Promise((resolve, reject) => {
    if (lastRequestUrl == url && url.indexOf('Create') !== -1) {
      reject('重复请求');
      return;
    }

    // 防止重复调用同一个接口
    clearTimeout(sameRequestTimeOut);
    lastRequestUrl = url;
    sameRequestTimeOut = setTimeout(function () {
      lastRequestUrl = '';
    }, sameRequestLimitSecond);

    if (!app) app = getApp();
    if (app.isRequesting) {
      app.isRequesting = false;
      wx.hideLoading();
    }
    clearTimeout(app.requestTO);
    app.requestTO = setTimeout(function () {
      app.isRequesting = true;
      wx.showLoading({
        title: '加载中',
      });
    }, 200);

    wx.request({
      url: `${app.globalData.baseurl}${url}`,
      method: options.method,
      data: options.data,
      header: {
        'Abp.TenantId': 1,
        'content-type': options.isObj
          ? 'application/json'
          : 'application/x-www-form-urlencoded',
        Authorization: 'Bearer ' + app.globalData.token.accessToken,
      },
      success(response) {
        if (response.statusCode == 200) {
          resolve(response.data);
          return;
        } else if (response.statusCode === 401) {
          // 401 权限过期，则重新请求获取token，登录后 重新调用用户想调用的接口
          app.login(() => {
            // request(url, options);
            resolve({ status: 401 });
          });
        } else {
          // 如果有返回错误信息，则提示
          if (response.data.error && response.data.error.message) {
            // 弹出接口错误提示
            wx.showToast({
              title: response.data.error.message,
              icon: 'error',
              duration: 2000,
            });
          }
          reject(response.data);
        }
      },
      fail(error) {
        clearTimeout(app.requestTO);
        setTimeout(function () {
          if (app.isRequesting == true) wx.hideLoading();
          app.isRequesting = false;
        }, 300);
        console.log(error);
        reject(error.data);
      },
      complete: () => {
        clearTimeout(app.requestTO);
        setTimeout(function () {
          if (app.isRequesting == true) wx.hideLoading();

          app.isRequesting = false;
        }, 300);
      },
    });
  });
};

const get = (url, options = {}) => {
  return request(url, {
    method: 'GET',
    data: options,
  });
};

//post对象
const postObj = (url, options) => {
  return request(url, {
    method: 'POST',
    data: options,
    isObj: true,
  });
};
//post参数
const post = (url, options) => {
  return request(url, {
    method: 'POST',
    data: options,
    isObj: false,
  });
};

const put = (url, options) => {
  return request(url, {
    method: 'PUT',
    data: options,
  });
};

// 不能声明DELETE（关键字）
const remove = (url, options) => {
  return request(url, {
    method: 'DELETE',
    data: options,
  });
};

module.exports = {
  get,
  post,
  put,
  remove,
  postObj,
};

五、获取用户信息及头像

六、分享

1. 分享好友

通过 onShareAppMessage 方法，可自定义每个页面的分享好友功能，可设置分享文案，图片及点击跳转的url。

2. 分享朋友圈

通过 onShareTimeline 方法，可自定义每个页面的分享朋友圈功能。

3. 全局分享配置

当然，也可以通过监听路由切换方式，全局设置分享功能，代码如下：

/**
 * 全局分享配置，页面无需开启分享
 * 使用隐式页面函数进行页面分享配置
 * 使用隐式路由（wx.onAppRoute）获取当前页面路由，并根据路由来进行全局分享、自定义分享
 */
!(function () {
  let shareUrl = '/assets/images/img-share.png';
  //获取页面配置并进行页面分享配置
  var PageTmp = Page;
  Page = function (pageConfig) {
    //1. 获取当前页面路由
    let routerUrl = '';
    wx.onAppRoute(function (res) {
      let pages = getCurrentPages(),
        view = pages[pages.length - 1];
      routerUrl = view.route;
    });
    //2. 全局开启分享配置
    pageConfig = Object.assign(
      {
        onShareAppMessage: function () {
          //根据不同路由设置不同分享内容（微信小程序分享自带参数，如非特例，不需配置分享路径）
          let shareInfo = {};
          //目前发现这里的变量只能用App外定义的全局的，或者缓存~~~~
          shareInfo = {
            title: '上万家庭都在使用的家庭健康助手',
            // title: pageConfigs[routerUrl],
            imageUrl: shareUrl,
            path: '/' + routerUrl,
          };
          return shareInfo;
        },
        onShareTimeline: function () {
          //根据不同路由设置不同分享内容（微信小程序分享自带参数，如非特例，不需配置分享路径）
          let shareInfo = {};
          //目前发现这里的变量只能用App外定义的全局的，或者缓存~~~~
          shareInfo = {
            title: '上万家庭都在使用的家庭健康助手',
            // title: pageConfigs[routerUrl],
            imageUrl: shareUrl,
            path: '/' + routerUrl,
          };
          return shareInfo;
        },
      },
      pageConfig,
    );
    // 配置页面模板
    PageTmp(pageConfig);
  };
})();

六、上拉下拉

1. 上拉加载更多

2. 下拉刷新