【工程目录结构说明】
- 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’/‘