前端---搭建微信小程序之路_小程序前端构建

首先当然是开发工具啦，微信开发者工具先下载起来~~~但是我通常不用微信开发者工具做开发编辑器，只用来展示调试作用，我还是喜欢vscode作为编辑器，第一次用vscode的小伙伴需要先下载一些插件。

创建项目

这里的appid是测试号，正式部署需要在微信公众平台进行申请，在平台上可以对小程序的开发团队、运营进行管理。


新建的项目代码结构就是这样的

vscode插件下载

 没有这些插件，咱们的代码也就没有高亮，代码提示这些友好功能哦~
1

项目目录结构

|- app.js 工程入口
|- app.json 小程序原生配置
|- app.wxss 部分公共样式
|- static 资源目录 --add
|- components 公用组件存放目录 --add
|- pages 页面路径
|- api api存放
|- utils 工程工具类

ui组件集成

1. 将 app.json 中的 “style”: “v2” 去除
2. npm init初始化生成packge.json
3. npm install --production安装npm包,如果报错Sorry, name can only contain URL-friendly characters.说明文件夹命名不规范，并且在npm init初始化的时候没有设置包名，重新初始化设置包名就好了
4. 执行npm i @vant/weapp -S --production安装vantui
5. 微信开发者工具，点击左上角工具，选择构建npm
6. 使用：在哪个页面使用，就在哪个页面的json文件下的usingComponents中引入，例如

// app.json
"usingComponents": {
"van-button": "@vant/weapp/button/index"
} 
1
2
3
4

提取request请求工具类

const tips = {
  1: '抱歉，出现了一个错误，请联系管理员',
  200: '服务器成功返回请求数据',
  201: '新建或修改数据成功',
  202: '一个请求已经进入后台排队(异步任务)',
  204: '删除数据成功',
  400: '发出信息有误',
  401: '用户没有权限(令牌失效、用户名、密码错误、登录过期)',
  402: '令牌过期',
  403: '用户得到授权，但是访问是被禁止的',
  404: '访问资源不存在',
  406: '请求格式不可得',
  410: '请求资源被永久删除，且不会被看到',
  500: '服务器发生错误',
  502: '网关错误',
  503: '服务不可用，服务器暂时过载或维护',
  504: '网关超时',
}
let axiosPromiseArr = []
const baseUrl = 'http://*******'
//请求相关默认配置 
const option = {
  loading: true,  //是否显示加载框
  json: false,    // 是否开启 json 格式
  space: true,    // 是否过滤参数空格
  error: true,    // 是否开启错误提示
  loadingText: '正在加载中',//加载中提示文字
}
function request({ url, method = 'GET', data = {}, options = option }) {
  try {
    options = Object.assign({}, option, options);
    return service(url, data, method, options);
  } catch (e) {
    console.log(e)
    wx.showToast({
      title: '抱歉，出现了一个错误',
      icon: 'none',
      duration: 2000
    });
  }
}

function service(url, data, method, option) {
  const { space, json, error, loadingText, loading } = option

  return new Promise((resolve, reject) => {
    // 过滤空格
    if (data && space) {
      for (const item in data) {
        (space[item] !== false && !!data[item] && typeof data[item] == 'string') && (data[item] = data[item].replace(/\s| /g, ''))
      }
    }
    !axiosPromiseArr.length && loading && wx.showLoading({
      title: loadingText,
      mask: true
    })
    axiosPromiseArr.push(url)
    const token = wx.getStorageSync('token');
    const openId = wx.getStorageSync('openId');
    const header = {
      token, openId,
      'content-type': `application/${json ? 'json' : 'x-www-form-urlencoded'}`
    }
    wx.request({
      url: baseUrl + url, data, method, header, complete(res) {
        axiosPromiseArr.pop()
        !axiosPromiseArr.length && loading && wx.hideLoading()
        console.log(res)
        resolve(checkStatusCode(res, error))
      }
    })

  })

}

function checkStatusCode(res, error) {
  const { status = res.statusCode, msg = tips[res.statusCode] || '系统错误', data = null } = res.data || {}
  if (status === 200) return res.data

  // 403：未登录，402 401：强制下线
  if (status === 403 || status === 402 || status === 401) {
    wx.reLaunch({ url: '/pages/login/login' });
  }

  error && wx.showToast({ title: msg || tips[status], icon: 'none', duration: 3000 })

  return {
    status,
    message: msg,
    data
  }
}  
module.exports = {
  request: request
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

//调用
import {request} from '../utils/request'
 
/**
 * @description demo
 */
 export function fun1(data) {
  return request({
    url: `/***`,
    method: 'get',
    data,
    options:{loadingText:'..',loading:false}//不单独配置可不设置值
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

以上就是搭建项目架构的主要流程了