微信小程序初始化项目架构

使用npm

从小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始，小程序支持使用 npm 安装第三方包。 首先我们需要初始化项目包，可以看到项目根目录生成了包配置文件package.json

使用vant-ui

• 通过 npm 安装

npm i @vant/weapp -S --production

• npm install --production
• 构建 npm 包 打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件
  
  构建完会生成一个miniprogram_npm文件夹
  
  （构建完如果编译报错，再构建一次就好了）

应用vant-weapp

• 需要在想相对应的.json文件里添加配置：

{
  "usingComponents": {
    "van-button": "../../miniprogram_npm/@vant/weapp/button/index"
  }
}

behaviors公用行为

behaviors 是用于组件间代码共享的特性，类似于vue中的“mixins”。每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。 每个组件可以引用多个 behavior ，behavior 也可以引用其他 behavior 。

详细的参数含义和使用请参考 Behavior 参考文档。

在behaviors目录下新建testBehavior.js，根据根据模块创建behavior，像用户模块会新建userBehavior.js

// behaviors/testBehavior.js
let SmallFourBeh = Behavior({
  behaviors:[],
  properties: {
    name: String,
    type: String
  },
  // 共享数据
  data: {
    selectedName: '',
    selectedType: ''
  },
  // 共享方法
  methods: {
    behaviorTap (name, type) {
      this.setData({
        selectedName:name,
        selectedType: type
      })
    }
  }
})
export { SmallFourBeh } // 导出

Behavior使用规则

下面实例与components结合

• behaviors/testBehaviors.js

// behaviors/testBehaviors.js
let SmallFourBeh = Behavior({
  behaviors:[],
  properties: {
    name: String,
    type: String
  },
  // 共享数据
  data: {
    selectedName: '',
    selectedType: ''
  },
  // 共享方法
  methods: {
    behaviorTap (name, type) {
      this.setData({
        selectedName:name,
        selectedType: type
      })
    }
  }
})
export { SmallFourBeh } // 导出

• pages/index/components/IndexChild1/index.js

// pages/components/IndexChild1/index.js
import { SmallFourBeh } from './../../../../behaviors/testBehaviors' // 导入testBehavior.js
Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    name: {
      type: String,
      value: 'name',
    },
    type: {
      type: String,
      value: 'type',
    }
  },
  behaviors: [SmallFourBeh], //  继承testBehavior.js里面的properties，data，methods
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    onTap (ev) {
      console.log(ev.target.dataset)
      let { name, type } = ev.target.dataset
      this.behaviorTap(name, type) // 通过this可以访问testBehavior.js里面的内容
    }
  }
})

• pages/index/components/IndexChild1/index.vue

<view class="inner">
  我是child1--{{name}}--{{type}}
  <button bindtap="onTap" data-name="{{ name }}" data-type="{{ type }}">获取数据详情：{{ selectedType }}，{{ selectedName }}</button>
</view>

components组件管理

• 全局公用组件components

该目录存放着项目中公共的组件，包括一些弹出层，加载组件等。组件以大驼峰命令，组件中可以再抽离各个小组件形成。

• 页面的业务组件components

• 每个页面组件应该由不同的小组件组件，这样拆成各个小组件开发，有助于我们维护开发。

• 在各个业务目录下新建对应组件目录
  

• 页面业务组件引入方法

pages/index/index.wxml

<view class="container">
  <index-child1 name="child-name" type="child-type"></index-child1>
</view>

在pages/index目录下新建components文件夹，在文件夹内部分别新建IndexChild1组件与IndexChild2组件

pages/index/components/IndexChild1/index.wxml

<view class="container">
  <index-child1 name="child-name" type="child-type"></index-child1>
</view>

pages/index/index.json

{
  "usingComponents": {
    "index-child1": "./components/Indexchild1/index",
  }
}

pages/index/components/IndexChild1/index.js

import { SmallFourBeh } from './../../../../behaviors/testBehaviors' // 导入testBehavior.js
Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    name: {
      type: String,
      value: 'name',
    },
    type: {
      type: String,
      value: 'type',
    }
  },
  behaviors: [SmallFourBeh], //  继承testBehavior.js里面的properties，data，methods
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    onTap (ev) {
      console.log(ev.target.dataset)
      let { name, type } = ev.target.dataset
      this.behaviorTap(name, type) // 通过this可以访问testBehavior.js里面的内容
    }
  }
})

pages/index/components/IndexChild1/index.json

{
  "component": true
}

config配置

在config目录新建index.js配置项目所需的要配置

const BASE_URL = 'https://shop.freshlejia.com/apiStore/'  //接口请求的基本路径

export default {
  BASE_URL,
  UPLOAD_URL: `${BASE_URL}api/common/upload` //上传服务器的路径
}

icons目录配置iconfont字体

• 在iconfont.cn新建项目组
• 添加项目所需的icon，下载相对对应的文件
• 项目引入相关文件 在根目录新建icons,存放刚才下载的文件吗，修改iconfont.css文件成iconfont.wxss

全局项目文件中引入

/**app.wxss**/
@import './icons/iconfont';

images图片资源

存放图片资源，也可按模块新建子目录存放。小图标可以转base64，具体项目根据自己需求来。