Node.js LTS版本css
微信Web开发工具 最新版html
git 最新版vue
本项目技术栈基于node
ES2016webpack
VueJSgit
mpvuees6
微信小程序web
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 里面的初始内容以下：npm
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，对这些配置不了解的，建议看一下微信方法的小程序文档，这里不作赘述。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 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 // 二级栏目导航
因为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 = post
3.在其余地方经过this.$post`调用，如：this.$post('getUserinfo',data)