# 项目提炼

# 良渚古城遗址购票小程序

项目介绍：

微信小程序开发，包含票务预约，服务预约，活动报名，信息发布，意见反馈，地图导览，我的等模块，并且支持中英文切换，其中票务预约包括了门票，车票，体验券,活动券等四种票种，并且提供了微信小程序智能客服的功能；地图导览利用了 webview 嵌入 H5 的方式，依托于腾讯地图 API，便于灵活开发

# 技术栈

微信小程序开发 wepy 腾讯地图

# 技术细节

打通第三方票务系统，实现四种不同票券的购买
克服当时小程序暂未开放手绘地址，以及瓦片图的能力，利用腾讯 web 地图，实现地图导览
wepy框架未提供多语言的解决方案，通过引入不同的配置文件，配合小程序生命周期实现了自定义的中英文切换

# 良渚古城遗址官网

项目介绍:

良渚古城遗址官网提供中、英、法、日、韩共五种语言切换，拥有信息发布、良渚文化、玩转良渚、互动社区等 4 个大的版块以及每个版块下共计 13 个小的模块，配合良渚古城遗址购票小程序以及良渚古城遗址购票官网同期上线。

# 技术栈

webpack ejs axios

# 项目细节

整个项目没有借助其他框架，完全由webpack自主进行构建，构建目录结构如下(部分)：

|-- liangzhu-official-website
  |-- bin
  |-- data
  |-- src
    |-- assets
    |-- component
    |-- utils
    |-- views

1
2
3
4
5
6
7
8

bin目录下用于存放webpack配置文件，views目录下用于存放页面文件

其中webpack配置中引入glob插件，读取src目录下所有page入口，作为webpack配置的entry,实现多入口

utils中存放所有的公用函数以及公共配置

# 公司内部 XII 脚手架

开发目的

统一公司内部开发规范，统一开发框架，提高项目开发效率，避免每次开发都花费一定量是时间成本在项目的搭建，框架的选型上；

# 1. 提供不同的脚手架模板（应对不同场景）

xii create [name]

Vue 模板（vue 全家桶）：配置了移动端适配插件postcss-px-to-viewport，vue-route前端路由，store状态管理，配置less预编译器
webpack 自主构建模板：配置jquery前端类库，gasp动效库，lodash方法库

# 2. 方法库

xii pcf

构思：拉取 gitlab 的地址上对应方法的 js 文件

现功能：xii pcf [jsName...] 可以拉取单个文件，或者多个文件

示例：

xii pcf getQ //拉取命名为getQ的或者包含getQ的js文件
xii pcf getQ translate  //拉取命名为getQ(translate)的或者包含getQ(translate)的js文件
xii pcf //为空时，显示所有可以拉取的js文件

1
2
3

提示：进到选择的 inquirer 时，enter 进入下一步；

# 3. XII 相关工具

# 3-1 xii tricks

xii tricks

执行该命令，输出一份 js 文件，格式为：

import beach from "./beach.png";
import book from "./book.png";
import bottle from "./bottle.png";
import bridge from "./bridge.png";
import buildings from "./buildings.png";

export default {
  beach,
  book,
  bottle,
  bridge,
  buildings,
};

1
2
3
4
5
6
7
8
9
10
11
12
13

在项目中新建xii.config.js文件，设置图片所在目录路径，执行命令后可以将图片以 ESmodule 的方式导出

# 3-2 xii tiny

xii tiny

利用第三方插件tiny-free,压缩图片

# 3-3 xii gsprite

xii gsprite

生成雪碧图

# 微信分享私有 npm 包

开发目的

公司的移动端项目都依托于微信的生态环境进行推广，近乎所有的移动端的活动页都涉及微信分享，避免每次开发都需要重新梳理微信 jsskd 鉴权流程，将微信 jssdk 授权过程到获取 jssdk 权限封装成统一方法，发布到私有 npm 库，提升开发效率

# 提供 common js 和 ES Module 两种引入方式

# common js 引入

const wxsdk = require("get-wxsdk");
let newsdk = new wxsdk();

1
2

# ES Module 引入

import wxsdk from "get-wxsdk";
let newsdk = new wxsdk();

1
2

# 实例化后的对象中存在两个方法`initsdk`和`share`

# initsdk 方法，可以自定义引入 JSApi

// 允许传入两个传参，jsApiList - []
let jsApiList = ["uploadImage"];
newsdk.initsdk(jsApiList).then(() => {
  wx.uploadImage();
});

// initsdk方法返回的是Promise,可以在then方法中调用初始化好的微信JS接口

1
2
3
4
5
6
7

// 允许传入两个传参，options - {}
let options = {
  imgUrl: "https://cos.zjqq.mobi/news/XXX.jpg" /* 微信分享显示的缩略图 */,
  link: window.location.href.split("#")[0],
  title: (testFlag ? "【测试】" : "") + "分享标题" /*微信分享的标题*/,
  desc: "分享摘要" /*微信分享的摘要文字*/,
};
newsdk.share(options, code);

1
2
3
4
5
6
7
8

# Axios 私有 npm 包

开发目的

为满足公司内部开发的业务需求，避免重复频繁的封装 axios 请求，封装了符合公司需求的 axios 私有包

# 技术细节

默认设置headers中的Content-Type为application/json;charset=utf-8，另外提供multipart/form-data值；
内置get,post,patch,delet,jsonp请求方法
添加拦截器，对请求和返回进行拦截处理
设置请求超时，重新发起请求次数设置

# Features

请求失败会自动发起重复请求，共三次，如果三次都失败，则返回Promise.reject
支持 jsonp 请求
所有请求都是 Promise 请求，后面可用.then 等 Prmise 回调方法

# 异步请求使用方法

import DzRequest from "dz-axios";

DzRequest.request(method, url, (params = {}), (headers = {}));

// get方法
DzRequest.get(url, params, (headers = {}));

// post方法
DzRequest.post(url, params, (headers = {}));

// patch方法
DzRequest.patch(url, params, (headers = {}));

// delete方法
DzRequest.delete(url, params, (headers = {}));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 所有入参

* @param {*} url 请求url 【必填】
* @param {*} method 请求方法
* @param {*} [params={}] 请求数据
* @param {*} [headers={}] 请求头
* @param {boolean} [needQs=false] 请求数据是否需要qs序列化
* @param {string} [contentType='json'] 请求头类型 值为[json]或者[formData]，默认为json
* @param {string} [responseType='json'] 返回数据类型 默认为json
* @param {*} timeout 超时时间
* @param {*} [AxiosOptions={}] axios的官方配置 填写后会覆盖上面的入参

1
2
3
4
5
6
7
8
9

# 默认配置

timeout = "30秒";
method = "POST";
retryTimes = 3; //重新请求次数
retryDelay = 1000; //重新发起请求的延迟时间

1
2
3
4

# 额外入参说明

AxiosOptions参数新增了以下两个字段，用于控制发起重复请求的次数和delay
retryTimes = 3 //重新请求次数
retryDelay=1000 //重新发起请求的延迟时间

1
2
3

# jsonp 使用方法

// 单独的jsonp
DzRequest.jsonp(url, options);

1
2

# jsonp options 说明

prefix, //前端自己定义的方法名称 默认 __jp开头
  param, //后端定义的回调方法名称 默认 callback
  timeout, //超时时间 默认60秒
  (data = {}); //传参

1
2
3
4

# 项目提炼

# 良渚古城遗址购票小程序

# 技术栈

# 技术细节

# 良渚古城遗址官网

# 技术栈

# 项目细节

# 公司内部 XII 脚手架

# 1. 提供不同的脚手架模板（应对不同场景）

# 2. 方法库

# 3. XII 相关工具

# 3-1 xii tricks

# 3-2 xii tiny

# 3-3 xii gsprite

# 微信分享私有 npm 包

# 提供 common js 和 ES Module 两种引入方式

# common js 引入

# ES Module 引入

# 实例化后的对象中存在两个方法`initsdk`和`share`

# initsdk 方法，可以自定义引入 JSApi

# Axios 私有 npm 包

# 技术细节

# Features

# 异步请求使用方法

# 所有入参

# 默认配置

# 额外入参说明

# jsonp 使用方法

# jsonp options 说明

# 直播可视化生成平台

# 评论组件

# 直播组件

# 项目提炼

# 良渚古城遗址购票小程序

# 技术栈

# 技术细节

# 良渚古城遗址官网

# 技术栈

# 项目细节

# 公司内部 XII 脚手架

# 1. 提供不同的脚手架模板（应对不同场景）

# 2. 方法库

# 3. XII 相关工具

# 3-1 xii tricks

# 3-2 xii tiny

# 3-3 xii gsprite

# 微信分享私有 npm 包

# 提供 common js 和 ES Module 两种引入方式

# common js 引入

# ES Module 引入

# 实例化后的对象中存在两个方法initsdk和share

# initsdk 方法，可以自定义引入 JSApi

# share 方法，微信分享方法

# Axios 私有 npm 包

# 技术细节

# Features

# 异步请求使用方法

# 所有入参

# 默认配置

# 额外入参说明

# jsonp 使用方法

# jsonp options 说明

# 直播可视化生成平台

# 评论组件

# 直播组件

# 实例化后的对象中存在两个方法`initsdk`和`share`