开辟前预备
环境:
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)
