coldblue123 / weapp-template

weapp-template

动动你可爱的小手手点亮一颗star, 模板基于原生小程序 + axios(原生wx.request封装) + vant ui + less + iconfont + eslint 搭建, 纯粹干净, 希望能帮你少踩一些坑

启动项目

# 克隆项目
git clone https://github.com/coldblue123/weapp-template.git

# 进入项目目录
cd weapp-template

# 安装依赖
npm install

# 写入appid至项目
npm run dev 您的小程序appid

# 构建npm
微信开发者工具 工具 => 构建npm => 重新编译

目录

• √ 环境变量配置
• √ 自定义预处理命令配置
• √ axios基于原生wx.request的封装
• √ vantUi
• √ 全局状态管理
• √ 计算属性
• √ less转wxss
• √ sass转wxss
• √ iconfont组件
• √ 冗余文件过滤
• √ eslint

✅环境变量配置

env.js里通过设置 WE_APP_BASE_API 来设置 request 请求的基本路径

// weapp state base api
export const WE_APP_BASE_API = 'http://test001-api.xxx/v1'

✅自定义预处理命令配置

package.json 里的 scripts 配置 dev build

• 通过 npm run dev ${1} ${2} 启用开发环境
  
• 通过 npm run build ${1} ${2} 打包上传环境
  ${1}appid必传 ${2}BASE_API默认正式服,非必传

此功能为解决以下问题, 其作用类似于多环境变量

1.便于多个小程序appid切换
2.便于多个服务器BASE_API切换
启用自定义预处理命令配置命令, 在编译前或上传前会自动替换appid与BASE_API

✅axios基于原生wx.request的封装

使用文档在request/README.md
在app.js初始化

import initAxios from './request/create'
App({
  onLaunch: function() {
    // 初始化axios
    initAxios()
  }
})

✅vantUi

项目默认引入vantUi, 构建npm文件后生成 miniprogram_npm/@vant/weapp vantUi组件目录

✅全局状态管理

/components/mobx-example/index为全局状态管理mobx示例
全局状态管理, 不要为了用而用, 看自己的项目是否有确切的需求, 花俏的堆砌反而会造成项目拥挤

✅计算属性

components/computed-example/index.js为computed和watch示例
wxs已经可以满足常规开发计算需要, 如果你的项目不严格要求组件化, 可以考虑不使用计算属性

✅less转wxss

vscode安装插件 easy less
vscode编写less保存会自动编译生成wxss

在.vscode/settings.json中添加以下配置

"less.compile": {
      "outExt": ".wxss"
}

✅sass转wxss

vscode安装插件 easy sass
vscode编写scss保存会自动编译生成wxss

在.vscode/settings.json中添加以下配置

  "easysass.formats": [{
    "format": "expanded",
    "extension": ".wxss"
  }]

✅iconfont组件

components/svg-icon 已添加至全局组件
iconfont文件在app.less中引入

<svg-icon icon="iconfont-github-o" size="108rpx" color="#333333"></svg-icon>

✅冗余文件过滤

上传代码审核时会有不少冗余文件, 可以在project.config.json中过滤

"packOptions": {
    "ignore": [
      {
        "type": "folder",
        "value": ".vscode"
      },
      {
        "type": "file",
        "value": ".gitignore"
      },
      {
        "type": "file",
        "value": ".eslintrc.js"
      },
      {
        "type": "file",
        "value": "package.json"
      },
      {
        "type": "file",
        "value": "package-lock.json"
      },
      {
        "type": "regexp",
        "value": "\\.md$"
      },
      {
        "type": "regexp",
        "value": "\\.less$"
      },
      {
        "type": "regexp",
        "value": "\\.scss$"
      }
    ]
  }

✅eslint

更改.eslint.js配置属于自己的规范, 小程序因为不支持browser显示, 所以仅在vscode中会出现错误提示, 并且在vscode中保存会自动格式化代码

• 注意小程序全局变量会出现eslint错误, 因此需要手动添加全局变量
  

注意

eslint自动格式化和wxss自动编译转换在部分同学的 vscode 开发工具中不能正常使用
解决方案:
第一步: 在vscode中点击 文件=>将工作区另存为
第二步: 在vscode中点击 文件=>打开工作区(选择刚刚另存为的工作区文件, 文件的后缀为.code-workspace)