wxstaffproject-readme

依赖

• uni-app框架 官方文档
• uview-ui框架 官方文档
• vue支持情况 详情查看

安装

npm install
复制代码

项目启动

npm run serve
复制代码

项目启动后 打开微信开发者工具

npm run serve:open
复制代码

build微信小程序生产版本

npm run build
复制代码

build微信小程序生产版本后 打开微信开发者工具

npm run build:open
复制代码

build微信小程序体验版本

npm run trial
复制代码

build微信小程序体验版本后 打开微信开发者工具

npm run trial:open
复制代码

可在src/utils/http.js 切换环境

const func = {
  development() { //开发环境
    wx.environ = env.pre
  },
  trial() { //体验版
    wx.environ = env.pre
  },
  production() { // 生产环境
    wx.environ = env.production
  }
}
复制代码

请求方法示例

使用方法请移步至 docs/请求方法示例.md
复制代码

上下拉加载示例

使用方法请移步至 docs/上下拉加载示例.md
复制代码

全局store和分包store的用法

• 全局的store用法还是和之前的一样
• 分包store使用的是Vuex Module + namespaced 详情查看
• 命名空间名称使用的是分包名称
• 下面使用mall分包举例
• 下面只是举例简单的使用，复杂的还需要自行去官方文档查阅，例如，想在分包store的actions,mutations中触发全局store的actions,mutations
• 下面使用的是CommonJS模块化，因为要在运行时使用require加载分包store
• 加载store逻辑写在src/utils/mixin.js
• 当要使用store时，应该优先考虑使用分包的store 再考虑使用全局的store

//packages/mall/store/state.js
module.exports = {
  count: 1
}

//packages/mall/store/mutations.js
module.exports = {
  increment(state, val) {
    state.count = val
  }
}

//packages/mall/store/index.js
const state = require('./state')
const mutations = require('./mutations')

module.exports = {
  state,
  mutations
}

// xxx.vue
<template >
  <view @click="onClick" >
    {{state.count}}
  <view>
</template>

<script>
export default {
  data() {
    return {
      state: this.$store.state.share
    }
  },
  methods: {
    onClick() {
      this.$store.commit('mall/increment', state.count + 1)
    }
  }
}
</script>
复制代码

页面顶部导航栏

• 请优先考虑使用uview-ui的<u-navbar>组件，不然的话使用ui框架就没有意义了
• 可以使用wx.g.system.navbarHeight来获取导航栏的高度
• 不建议使用wx.getMenuButtonBoundingClientRect() 来获取胶囊信息
• 因为这个方法很多坑，不同机型反馈的不一样
• 具体可查看社区其它开发者，提出的各种bug 详情查看
• 示例

<template>
  <view>
    <u-navbar title="首页" />
  </view>
</template>
<script>
export default {
  data() {
    return {
      //可以这样获取导航的高度do something...
      //它的来源在  src/utils/system.js
      navbarHeight: wx.g.system.navbarHeight  
    }
  }
}
</script>
复制代码

注意事项

1. 页面样式与组件样式

• 页面的样式会影响组件的样式 可查看组件样式隔离
• 组件之间的样式不会影响
• uni-app 在创建组件时，应该使用的是apply-shared模式
• 解决方法
• 第一种
• 使用 <style lang=”scss” scoped>
• 但是使用这个模式 编译时会在每个标签加上data-v-xxx 例：<view data-v-be1baef6>
• wxss 文件的每个class也会加上 例：.container.data-v-xxx
• 这样项目变庞大时 会比 没加scoped时 增加很多体积，而微信小程序的每个分包限2M
• 所以暂不考虑此方法 也建议大家不要使用
• 第二种 （推荐）
• 页面的所有class名称都请添加 p- 开头 (p是page的意思) 例：p-container
• 或者 _ 开头 例： _container
• 组件样式不要使用这两个开头，这样页面的样式就不会影响到组件的样式
• 其实页面的样式能影响组件的样式，有一个好处
• 就是可以在页面直接修改组件的样式
• 最后，g- 是全局scss的开头 u- 是uview-ui scss的开头

2. uview-ui的<u-picker>组件

• 请大家尽量尽量尽量不要使用<u-picker>组件
• 因为这个组件引用了 省市区文件 大小140KB 左右
• 而且是增加到主包的
• 应尽量使用微信小程序提供的<picker> <picker-view>组件

3. 全局的components

• 全局的components 是不需要引用的
• 可直接在模板中使用
• 前提是要按照 /components/n/n.vue
• 这样的格式去创建组件 可参考全局<loadmore>组件
• 分包的components 还是需要引用的
• 本来也想做不需要引用的
• 但是想想，如果别人二次开发你的代码
• 很难找到组件的来源

4. 引用静态文件

• 建议大家按照如下方法引用
• 全局static <image src=”https://juejin.cn/static/xxx.png” />
• 分包static <image src=”https://juejin.cn/packages/分包名称/static/xxx.png” />
• 这样引用的好处在于，当我们copy代码时 不是需要再更改文件路径了
• 而且也可以从路径中很快定位图片的所在位置

5. 引用分包组件

• 建议大家按照如下方法引用
• import list from ‘@/packages/分包名称/components/xxx.vue’
• 这样引用的好处在于，当我们copy代码时 不是需要再更改文件路径了
• 而且也可以从路径中很快定位组件的所在位置

6. 组件的存放问题

• 如果只是作用于当前页面的组件，建议在当前页面目录下新建一个components存放
• 这样的好处是创建了新的命名空间
• 具体可参考market分包的 channel-code和statistics页面
• 什么时候存放在页面的公共组件呢？我建义如果一个组件被两个以上的页面引用到了
• 这个时候就可以将其放分包公共的components文件中
• 试想一下，如果分包的下所有页面的组件都放在公共的components中
• 命名就够你受的了，倒时候项目庞大之后，
• 这个文件夹下有几十个文件，公共组件和页面组件都有
• 天知道一个组件会被多少个页面引用，改的时候牵一发而动全身

项目目录结构

├─public
|   └index.html
├─scripts                                   scripts下的js文件是用来辅助项目的，不响应正常开发，感觉兴趣的同学可以看一下                                  
|  ├─optimize-uview-ui.js
|  ├─set-appid.js
|  ├─wechatdevtools-cli
|  |     ├─find-cli-path.js
|  |     ├─open.js
|  |     ├─serve-open-wxdevtools-plugin.js
|  |     └upload.js
├─docs                                      项目文档 一些方法和组件的使用示例
|   └上下拉加载示例.md                        
├─src
|  ├─components                             全局的公共组件 按照这样的格式（/components/n/n.vue）
|  |     ├─loadmore                         在.vue文件中可直接使用，不需要引用，可参考全局<loadmore>组件
|  |     |    └loadmore.vue
|  ├─packages                               微信小程序分包，详情查看 https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic.html
|  |    ├─main                             
|  |    |   ├─static                        主包的静态文件
|  |    |   ├─pages                         主包的pages  强烈建议按这样的格式新建页面 pages/文件夹名称/index.vue
|  |    |   |   ├─index      
|  |    |   |   |   ├─components            建议 如果组件只是用于当前页面，请在当前page目录下新建一个components 
|  |    |   |   |   | └xxx.vue              不要将只用于当前页面的组件放到公共组件中。                 
|  |    |   |   |   └index.vue       
|  |    |   ├─components                    主包的公共组件
|  |    |   |     └coupons.vue              
|  |    |   ├─store                         主包的Vuex store 只作用于主包内，当要使用store时，应该优先考虑使用主包的store 再考虑使用全局的store
|  |    |   |   ├─index.js                  
|  |    |   |   ├─mutations.js                 
|  |    |   |   ├─state.js
|  |    |   ├─scss                          主包的公共scss文件
|  |    |   ├─utils                         主包的工具函数或一些辅助的js文件写这里
|  |    |   ├─plugins                       存放主包要使用的第三方插件，当要引用插件时，应该优先考虑在主包引用 再考虑全局引用
|  |    ├─mall                             
|  |    |   ├─static                        分包的静态文件
|  |    |   ├─pages                         分包的pages  强烈建议按这样的格式新建页面 pages/文件夹名称/index.vue 可参考share分包
|  |    |   |   ├─activity                  
|  |    |   |   |    └index.vue       
|  |    |   ├─components                    分包的公共组件
|  |    |   |     └coupons.vue              
|  |    |   ├─store                         分包的Vuex store 只作用于分包内，当要使用store时，应该优先考虑使用分包的store
|  |    |   |   ├─index.js                  如果分包未创建store 可参考share分包的store
|  |    |   |   ├─mutations.js              分包store加载逻辑写在 src/utils/mixin.js    
|  |    |   |   ├─state.js
|  |    |   ├─scss                          分包的公共scss文件
|  |    |   ├─utils                         分包的工具函数或一些辅助的js文件写这里
|  |    |   ├─plugins                       存放分包要使用的第三方插件，当要引用插件时，应该优先考虑在分包引用
|  |    ├─....                              其它的分包就一一介绍，因为格式都是差不多的      
|  ├─plugins                                全局的第三方插件
|  |    └index.js
|  ├─scss                                   全局的scss
|  ├─static                                 全局的静态文件
|  ├─store                                  全局的Vuex Store
|  |   ├─index.js
|  |   ├─mutations.js
|  |   └state.js
|  ├─utils
|  |  ├─system.js                           缓存wx.getSystemInfoSync数据，可使用wx.g.system.xxx访问
|  |  ├─http.js                             对wx.request的封装，重新梳理了别名方法，wx.$http, wx.$get, wx.$post, wx.$delete
|  |  ├─index.js                            utils文件夹里所有js的入口文件 最后在main.js 引用注册
|  |  ├─index.js                            统一登录逻辑处理
|  |  ├─mixin.js                            Vue的全局mixin
|  |  └utils.js                             一些常用的工具函数，可使用wx.utils.xxx访问
|  ├─App.vue                                App.vue  同微信小程序app.js、app.css
|  ├─main.js
|  ├─manifest.json                          平台的配置 详情查看 https://uniapp.dcloud.io/collocation/manifest
|  ├─pages.json                             路由在这里注册
|  ├─uni.scss                               uni.scss文件只存放scss变量
├─README.md                                 你当前正在阅读的文件
├─babel.config.js
├─package-lock.json
├─package.json
├─postcss.config.js
├─tsconfig.json                             在vscode中，会有语法提示，不要删除
├─vue.config.js                             支持有限 详情查看 https://uniapp.dcloud.io/collocation/vue-config
复制代码

项目统一筛选弹窗样式

使用方法 请移步至src/scss/popup.scss
复制代码

微信开发者工具-建议按照如下配置

• 项目编译后已是ES6转ES5，所以不用勾选，勾选了反而会变慢
• 项目编译后样式已补全 同上

在vscode中 可安装如下插件可提供代码提示

uniapp-snippet
uview-snippet
复制代码

感谢您在百忙之中阅读了此文档