开发前准备
环境:
Node.js LTS版本
微信Web开发工具 最新版
git 最新版
文档:
本项目技术栈基于
快速开始
1.克隆项目
git clone https://gitee.com/Fntys/met_wx.git
2.进入项目
cd met_wx
3.安装依赖
npm install
4.启动构建
npm run dev
5.打开微信Web开发工具，导入项目
目录结构
├── build // 构建相关
├── config // 配置相关
├── dist // 打包相关
├── node_modules // 第三方模块
├── src // 源代码
│ ├── utils // 全局公用方法
│ ├── pages // 所有页面文件
│ ├── components // 业务组件
│ ├── assets // 图片 字体等静态资源
│ ├── components // 业务组件
│ ├── styles // 公共样式文件
│ ├── main.js // 入口文件 加载组件 初始化等
│ ├── App.vue // 入口页面
├── static // 第三方不打包资源
├── .babelrc // babel-loader 配置
├── .eslintrc.js // eslint 配置项
├── .postcssrc.js // 后处理器
├── .gitignore // git 忽略项
├── index.html // html模板
└── package.json // package.json页面路由
全局配置
首先，我们看一下项目的配置文件 /src/main.js 里面的初始内容如下：
import Vue from 'vue'
import App from './App'
import './styles/index.scss'
import {post} from './utils/request.js'
Vue.prototype.$post = post
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue(App)
app.$mount()
export default {
// 这个字段走 app.json
config: {
// 页面前带有 ^ 符号的，会被编译成首页，其他页面可以选填，我们会自动把 webpack entry 里面的入口页面加进去
pages: ['pages/about/main', '^pages/index/main', 'pages/product/main', 'pages/news/main','pages/shownews/main','pages/showproduct/main'],
window: {
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#fff',
navigationBarTitleText: '米拓官网',
navigationBarTextStyle: 'black'
},
tabBar: {
list: [{
pagePath: 'pages/index/main',
text: "首页",
iconPath: 'assets/home.png',
selectedIconPath: 'assets/home-active.png'
}, {
pagePath: 'pages/product/main',
text: "产品",
iconPath: 'assets/product.png',
selectedIconPath: 'assets/product-active.png'
}, {
pagePath: 'pages/news/main',
text: "新闻",
iconPath: 'assets/news.png',
selectedIconPath: 'assets/news-active.png'
}, {
pagePath: 'pages/about/main',
text: "简介",
iconPath: 'assets/about.png',
selectedIconPath: 'assets/about-active.png'
}]
},
networkTimeout: {
request: 10000,
downloadFile: 10000
},
}
}这里的 config 字段下面的内容，就是整个小程序的全局配置了，其中pages是页面的路由，window则是页面的一些配置（大部分都是顶部栏的配置），这些配置，最终都会被打包到原生小程序的app.json，对这些配置不了解的，建议看一下微信方法的小程序文档，这里不做赘述。
页面配置
页面结构
本项目共有6个页面，分别为：
├── pages // 页面文件
│ ├── about // 简介页
│ ├── index // 首页
│ ├── news // 新闻列表页
│ ├── product // 产品列表页
│ ├── shownews // 新闻详情页
│ ├── showproduct // 产品详情页
新增页面
复制任意/pages/下的文件夹，重命名，在/src/main.js的config.pages字段里添加你新增的页面路径，如：
- 新增了页面
pages/abc - 然后在
/src/main.js下的config.pages字段中新增'pages/abc/main'
Tips ： 新增页面文件夹里必须包含main.js，新增完页面后重启运行npm run dev
页面跳转
- 用小程序原生的 navigator 组件，比如我们想从列表页跳到详情页面：
<navigator url="../../pages/shownews/main"></navigator>，只需在url处填写详情页面main.js相对于当前页面的路径即可。 - 元素绑定
tap事件，执行 wx.navigateTo 方法。
样式
样式编写采用了 Scss
全局样式
全局样式文件存放于/src/styles/中
在/src/main.js中通过import './styles/index.scss'被全局引入
├── styles // 公共样式文件
│ ├── common.scss // 公共样式
│ ├── index.scss // 全局样式
│ ├── mixin.scss // 混合器
│ ├── varable.scss // 变量
页面样式
由于页面大多是由组件组成，所以一个页面的样式被分散到各个组件。如：src/components/IndexAbout.vue中的
<style lang="scss" scoped>
.index_about {
.about-img img {
width: 100%;
margin-bottom: 20px;
}
.about-content p {
font-size: 13px;
color: rgb(89, 89, 89);
}
}
</style>影响了index页面的about区块的样式。
其中lang="scss"规定编译器按照何种语法来解释css语言，这里我们是用的scss。scoped表示它的样式作用于当下的模块，很好的实现了样式私有化的目的，这是一个非常好的机制。
Tips ： 对于高复用的公共组件谨慎使用scoped属性
组件
前面我们说到页面大多都是组件组成，在src/components/下存放了项目所有组件。
├── components // 全部组件
│ ├── index // 首页组件
│ │ ├──IndexAbout.vue // 简介
│ │ ├──IndexNews.vue // 新闻
│ │ ├──IndexProduct.vue // 产品
│ │ ├──IndexService.vue // 服务
│ ├── inside // 内页组件
│ │ ├──News.vue // 新闻列表
│ │ ├──Product.vue // 产品列表
│ │ ├──ShowNews.vue // 新闻详情页
│ │ ├──ShowProduct.vue // 产品详情页
│ ├── common // 公共组件
│ │ ├──Banner.vue // 轮播图
│ │ ├──Sidebar.vue // 侧边栏
│ │ ├──SubcolumnNav.vue // 二级栏目导航 组件新建与引入
vue 组件
由于mpvue只能使用单文件组件（.vue 组件）的形式进行支持，所以我们只能新建单文件的组件。
1.新建文件，命名采用 PascalCase (驼峰式命名)，如：HelloWorld.vue，
2.在页面引入你的组件：
import HelloWorld from '@/components/xxx/HelloWorld'` //引入组件
components: {
HelloWorld //组件注册
}3.在字符串模版中使用<hello-world></hello-world>
Tips ：@是webpack的alias，指向src，目的是让后续引用的地方减少路径的复杂度
小程序组件
mpvue 可以支持小程序的原生组件，比如： picker,map 等，需要注意的是原生组件上的事件绑定，需要以 vue 的事件绑定语法来绑定，如 bindchange="eventName" 事件，需要写成 @change="eventName"
示例代码：
<picker mode="date" :value="date" start="2015-09-01" end="2017-09-01" @change="bindDateChange">
<view class="picker">
当前选择: {{date}}
</view>
</picker>网络请求
由于微信的限制，小程序发起请求必须通过 wx.request 方法，这里我们进行了Promise的封装。
1.新建request.js
let serverPath = 'http://www.abc.com/api/'
export function post(url,body) {
return new Promise((resolve,reject) => {
wx.request({
url: serverPath + url, // 拼接完整的url
data: body,
method:'POST',
header: {
'content-type': 'application/json'
},
success(res) {
resolve(res.data) // 把返回的数据传出去
},
fail(ret) {
reject(ret) // 把错误信息传出去
}
})
})
}2.在src/main.js中全局引入，并挂在到Vue原型上。
import {post} from './utils/request.js'
Vue.prototype.$post = post3.在其他地方通过this.$post`调用，如：this.$post('getUserinfo',data)
