落俗两句
第一次接触小程序的时候是2017年6月底，在慕课网上跟着7月老师学的第一门小程序课程是7月老师的微信小程序开发入门与实战教程-慕课网实战，跟着老师的视频敲了大半个月，把自己的第一个小程序敲出来了（话说是对着敲，但是还是有爱222222）.
随着时间的推移，小程序的开发框架也出来好几个,比如：
两者各有优势，看了下mpvue的文档，之前也熟悉vue的开发，所以这次练习项目，就采用了mpvue和小程序原生组件混用的方式进行开发了
1.开发环境的搭建
直接拿的mpvue基于vue-cli的脚手架搭建项目目录结构
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project
# 安装依赖
$ cd my-project
$ npm install
# 启动构建
$ npm run dev
2.目录结构
3.目录文件详解
3.1 config.js 主要用来配置数据接口 3.2 utils文件夹下的index.js 封装了wx.request请求
// http 请求工具函数
export function get (url, data) {
return request(url, 'GET', data)
}
export function post (url, data) {
return request(url, 'POST', data)
}
function request (url, method, data) {
return new Promise((resolve, reject) => {
wx.showNavigationBarLoading()
wx.request({
data,
method,
url: url,
success: function (res) {
// 请求成功
if (res.data.code === 0) {
resolve(res.data.data)
wx.hideNavigationBarLoading()
} else { // 请求失败
showModal('失败', res.data.data)
reject(res.data)
wx.hideNavigationBarLoading()
}
}
})
})
}
export function searchRequest (url, data) {
return new Promise((resolve, reject) => {
wx.showNavigationBarLoading()
wx.request({
data,
method: 'GET',
url: url,
success: function (res) {
// 请求成功
if (res.data.code === 0) {
resolve(res.data)
wx.hideNavigationBarLoading()
} else { // 请求失败
showModal('失败', '搜索失败')
reject(res.data)
wx.hideNavigationBarLoading()
}
}
})
})
}
3.3 pages文件夹对应小程序单独的页面，其中main.js和*.vue文件对应，一个页面一个vue实例
import Vue from 'vue'
import search from './search'
const app = new Vue(search)
app.$mount()
# 也可以单独配置当前页面的一些配置，会覆盖src目录下的main.js里的相同配置
export default {
config: {
navigationBarTitleText: '',
backgroundTextStyle: 'dark',
navigationBarBackgroundColor: '#fff',
navigationBarTextStyle: 'black',
onReachBottomDistance: 0
}
}
说下敲代码过程的感受：6月29看完mpvue入门课程的视频，刷完mpvue的文档，想进一步巩固自己mpvue方面的知识，于是就有本次练手项目。周小码一般都是晚上回家敲个一两个小时，中间也间断过。具体是这么开发的。。。
1.因为周小码 只是一个小菜前端，只能抓别人的数据来填充下页面。所以就用charles 抓了本次项目需要的一些数据
2.登录QQ阅读小程序体验了一把。看了下页面构成。把一些页面中的相同部分抽离成单个组件，以减少代码，达到代码复用及提高代码维护性。
3.项目用到的一些icon和小图，直接放在src目录下的static目录下
4.项目没有用第三方css框架，采用了flex布局和less预处理器进行样式编写
5.本次项目采用的是mpvue框架+原生组件混用的开发方式，需要注意小程序的生命周期和mpvue的生命周期，以及事件的处理
