【小程序】目录结果与模块化

【工程目录结构说明】

• pages文件夹：项目页面文件夹，用于存放开发者编写的页面
• utils文件夹：用于存放公共的工具类方法文件
• app.js文件：用于配置小程序全局逻辑方法
• app.json文件：用于配置小程序全局公共配置
• app.wxss文件：用于配置小程序全局页面样式
• project.config.json文件：项目配置文件

【模块化】

CommonJs是一种广泛使用的模块化机制。该规范提倡每个文件就是一个模块，有自己的变量、函数、作用域等，模块内内容均为私有的，对外界不可见。因此，模块必须通过module.exports或exports导出对外的接口，通过require()方法加载模块文件，返回该模块的exports对象。

• 导出模块
  //common.js
  //定义函数
  function Say(name){
  console.log(‘hello’)
  }
  //暴露函数
  (module.)exports.Say=Say

• 导入模块
  //引入common.js暴露的方法
  const common=require(‘common.js’)
  Page({
  helloMi(){
  //通过暴露的Say()方法，执行Say()函数内的console.log()
  common.Say(‘Mi’)
  }
  })

• exports默认是module.exports的引用，在模块中随意更改exports的指向会造成未知错误，因此推荐采用module.exports来暴露模块接口。
  exports={Say}
  module.exports.Say=Say

【小程序组件】

• 视图容器
  1）基础容器（view）：搭建页面的基础容器，类似于Html的div标签
  2）滑动容器（swiper）：必须搭配swiper-item标签使用，可用于实现轮播图等效果
  3）移动容器（movable-view、scroll-view）：movable-view容器是从基础库1.2开始支持，必须放在movable-area容器内使用，可实现动态的拖动等效果；scroll-view容器更多用于横向或竖直滚动，可实现广告轮播效果、跑马灯等效果
  4）覆盖容器（cover-view、cover-image）：在原生标签上继续覆盖内容，可使用cover-view组件；在图片上覆盖，可使用cover-image组件。
  =》原生组件包括map、video、canvas、camare、live-player、live-pusher
• 基础内容：包括icon（图标）、progress（进度条）、rich-text（富文本）和text（文本）
• 表单组件：包括button、checkbox、editor（富文本编辑器）、form、input、label、picker、radio、slider、switch和textarea等常用组件。其中editor组件是小程序特有的组件，通过editor组件可以快速创建富文本编辑器，在微信基础库需要2.7版本以上才能支持。
• 导航组件：包括functional-page-navigator（主要用于跳转插件功能页）和navigator（完成页面导航）
• 媒体组件：包括audio、video、image、camere、live-player和live-pusher，用于实现小程序内展示音频、视频和图片等功能，后三个为小程序新增组件
• 地图：map组件主要用于地图相关的定制化开发
• 画布：Canvas组件，小程序中的画布组件。在小程序中被定义为原生组件，不同于Html5中的canvas标签，小程序中若要在其上层覆盖内容，需要配合覆盖容器使用

【Vue项目配置】

• 配置node后安装vue依赖库
  npm install vue
• 配置webpack包
  npm install webpack@4.29.0 webpack-cli@3.2.1 -D
• 安装淘宝镜像
  npm install -g cnpm --registry-https://registry.npm.taobao.org
• 初始化项目
  vue init webpack name
• 运行项目
  npm run dev
• 安装Mint UI插件
  npm install mint-ui -S
• 引入Mint UI插件（main.js）
  import Mint UI from ‘mint-ui’
  import ‘mint-ui/lib/style.css’
  Vue.use（Mint UI）
• 安装axios插件
  npm install axios
  npm install --save axios vue-axios
• 引入axios插件
  import axios from ‘axios’
  import VueAxios from ‘vue-axios’
  Vue.use（VueAxios,axios）
• 小程序终端浏览所有文件
  cnpm安装浏览：
  cnpm install
  cnpm i browser-sync-g
  打开http服务：
  cnpm i -g http-server
  终端预览：
  browser-sync start -server -file’/‘