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

骑猪看日落 2023-03-13 13:57 21阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzMyMTg0_size_16_color_FFFFFF_t_70]

### 使用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 模块 选项**，构建完成后，即可引入组件  
    ![在这里插入图片描述][20200514150526328.png]  
    构建完会生成一个miniprogram\_npm文件夹  
    ![在这里插入图片描述][20200514150557461.png]  
    （构建完如果编译报错，再构建一次就好了）

### 应用vant-weapp ###

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

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

![在这里插入图片描述][20200514150714669.png]  
![在这里插入图片描述][20200514150736421.png]

### 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 ####

该目录存放着项目中公共的组件，包括一些弹出层，加载组件等。组件以**大驼峰**命令，组件中可以再抽离各个小组件形成。  
![在这里插入图片描述][20200514164345855.png]

*  #### 页面的业务组件components ####
 *  每个页面组件应该由不同的小组件组件，这样拆成各个小组件开发，有助于我们维护开发。
 *  在各个业务目录下新建对应组件目录  
    ![在这里插入图片描述][20200514164526554.png]
 *  ##### 页面业务组件引入方法 #####

pages/index/index.wxml

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

pages/index/components/IndexChild1/index.wxml

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，具体项目根据自己需求来。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzMyMTg0_size_16_color_FFFFFF_t_70]: /images/20230312/ecfbe7ff5a254defa568f073ccc66776.png
[20200514150526328.png]: /images/20230312/26e9e45977c043afa897d6a591738def.png
[20200514150557461.png]: /images/20230312/1fc5f477545b4df293a004684746916c.png
[20200514150714669.png]: /images/20230312/292f5ff4bed84994ac644ee41a8b538e.png
[20200514150736421.png]: /images/20230312/6e6f59e7a10b4dc885e2179d7ad2b82d.png
[Behavior]: https://developers.weixin.qq.com/miniprogram/dev/reference/api/Behavior.html
[20200514164345855.png]: /images/20230312/24646dd7602f4b32910dcf51ee22db48.png
[20200514164526554.png]: /images/20230312/10ff6a0cf23e40c9877497d366f1fc5a.png