zyh9 / mpvue-apps

	//main.json配置（单个页面的配置）
	{
		navigationBarTitleText: '',//导航文字
		navigationBarBackgroundColor: '',//导航颜色
		backgroundTextStyle: "dark",//下拉loading样式
		enablePullDownRefresh: true,//启用下拉刷新
		onReachBottomDistance: 60//触底距离
	}

	//webpack.base.conf.js文件
	const appEntry = { app: resolve('./src/main.js') }

	function getEntry (rootSrc, path) {
		var map = {};
		glob.sync(rootSrc + '/' + path + '/**/main.js')
		.forEach(file => {
			var key = relative(rootSrc, file).replace('.js', '');
			map[key] = file;
		})
		return map;
	}

	let entry;
	const pagesEntry = getEntry(resolve('./src'), 'pages')
	// 判断app.json文件中是否包含subpackages配置来判断单包、分包
	let appJson = require('../src/app.json')
	let subpackages = appJson.subpackages || appJson.subPackages || [];
	if(subpackages.length){
		let entryPath = subpackages.map(({root})=>({root}))
		let entryArray = [];
		entryPath.forEach( e =>{
			entryArray.push(getEntry(resolve('./src'), e['root']))
		})
		entry = Object.assign({}, appEntry, pagesEntry, ...entryArray)
	}else entry = Object.assign({}, appEntry, pagesEntry)

	//pages.js配置（单个页面的配置以及路径）
	module.exports = [
		{
			path: 'pages/index',//主包页面所在路径
			config: {
				navigationBarTitleText: '',//导航文字
				navigationBarBackgroundColor: '',//导航颜色
				backgroundTextStyle: "dark",//下拉loading样式
				enablePullDownRefresh: true,//启用下拉刷新
				onReachBottomDistance: 60//触底距离
			}
		},
		{
			path: 'pagesOther/other',//分包页面所在路径
			subPackage: true,//是否分包，主包可不用配置此项
			config: {
				navigationBarTitleText: '',//导航文字
				navigationBarBackgroundColor: '',//导航颜色
				backgroundTextStyle: "dark",//下拉loading样式
				enablePullDownRefresh: true,//启用下拉刷新
				onReachBottomDistance: 60//触底距离
			}
		}
	]

	//app.json的路径
	"pages":[
		"pages/index",
		"pages/order",
		"pages/user",
		{
			"path": "pagesOther/other",
			"subPackage": true
		}
	]
	//单个vue文件的config配置
	export default {
		config: {
			navigationBarTitleText: '首页'
		},
		data() {
			return {}
		},
		onLoad() {},
		onReady() {},
		onShow() {},
		methods: {},
		computed: {},
		watch: {},
		components: {}
	}

	// 版本1
	new CopyWebpackPlugin([
		{
			from: path.resolve(__dirname, '../static/tabBar'),
			to: path.resolve(__dirname, '../dist/static/tabBar')
		},
		{
			from: path.resolve(__dirname, '../static'),
			to: path.resolve(__dirname, '../dist/static'),
			ignore: ['*.png']
		}
	]),
	// 版本2
	new CopyWebpackPlugin([
		{
			from: path.resolve(__dirname, '../static/tabBar'),
			to: path.resolve(config.build.assetsRoot, './static/tabBar')
		},
		{
			from: path.resolve(__dirname, '../static'),
			to: path.resolve(config.build.assetsRoot, './static'),
			ignore: ['*.png']
		}
	]),

	{
		"mpvue": "1.0.18",
		"mpvue-loader": "1.1.4",
		"mpvue-template-compiler": "1.0.18",
	}

	{
		"mpvue": "1.4.7",
		"mpvue-loader": "1.4.0",
		"mpvue-template-compiler": "1.4.7",
	}

	//只针对压缩zip
	const fs = require('fs');
	const path = require('path');
	const gulp = require('gulp');
	const vsftp = require('gulp-vsftp');
	const gulpIgnore = require('gulp-ignore');//过滤文件插件
	const zip = require('gulp-zip');//生成zip插件
	const dayjs = require('dayjs');
	const distFile = 'dist';//打包目录
	const packageInfo = require("./package.json");

	let platform =  process.argv[process.argv.length - 1] || 'wx';

	const gulpZip = () => gulp.src(path.resolve(distFile + '/' + platform + '/**'))
		.pipe(gulpIgnore.exclude('*.map'))
		.pipe(zip('名称' + platform + '-' + packageInfo.version + '-' + dayjs().format('YYYY-MM-DD HH-mm-ss') + '.zip'))
		.pipe(gulp.dest('./'))

	//压缩打包文件
	gulp.task(platform, gulpZip)

	// gulp.task--定义任务
	// gulp.src--找到需要执行任务的文件
	// gulp.dest--执行任务的文件的去处
	// gulp.watch--观察文件是否发生变化

	"scripts": {
		"zip": "npm run build:wx && gulp wx",
		"zip:wx": "npm run zip",
		"zip:swan": "npm run build:swan && gulp swan",
		"zip:tt": "npm run build:tt && gulp tt",
		"zip:my": "npm run build:my && gulp my"
	}

	distance(lat1, lng1, lat2, lng2) {
	    var radLat1 = lat1 * Math.PI / 180.0;
	    var radLat2 = lat2 * Math.PI / 180.0;
	    var a = radLat1 - radLat2;
	    var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
	    var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
	    s = s * 6378.137;
	    s = Math.round(s * 10000) / 10000;
	    return s; //返回数值单位：公里
	}

	npm install gcoord --save
	
	<script src="https://unpkg.com/gcoord/dist/gcoord.js"></script>
	
	CommonJS:
	
		const gcoord = require( 'gcoord' );
		const { transform, WGS84, GCJ02 } = require( 'gcoord' );
	
	ES Module:
	
		import gcoord from 'gcoord'
		import { transform, WGS84, GCJ02 } from 'gcoord';

	var result = gcoord.transform(
	    [ 116.403988, 39.914266 ],    // 经纬度坐标
	    gcoord.WGS84,                 // 当前坐标系
	    gcoord.BD09                   // 目标坐标系
	)
	
	console.log( result );  // [ 116.41661560068297, 39.92196580126834 ]

	module.exports = {
	  "plugins": {
	    "postcss-mpvue-wxss": {},
	    "autoprefixer":{}
	  }
	}

	onPageScroll(e){ // 获取滚动条当前位置
		console.log(e)
	}

	goTop: function (e) {  // 一键回到顶部
		if (wx.pageScrollTo) {
			wx.pageScrollTo({
				scrollTop: 0
			})
		} else {
			wx.showModal({
				title: '提示',
				content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
			})
		}
	}

	//数据请求地址
	const baseUrl = 'localhost:8080';

	const commonHeader = _ => {
		//headers每次必传数据存放位置
		return {
			//...
		}
	}

	//get数据请求
	const get = (opt = {}) => {
		let time = new Date().getTime();
		const str = Object.entries(opt.params).map(e => `${e[0]}=${e[1]}`).join("&").replace(/\s/g, '');
		let editHeaders = Object.assign({}, { 'content-type': 'application/json' }, commonHeader())
		opt.headers && (editHeaders = Object.assign({}, editHeaders, opt.headers))
		return new Promise((resolve, reject) => {
			let address = str ? `${opt.url}?${str}&t=${time}` : `${opt.url}?t=${time}`;
			wx.request({
				url: baseUrl + address,
				header: editHeaders,
				method: "GET",
				success: res => {
					setTimeout(_ => {
						opt['success'] && opt['success'](res.data);
						resolve(res.data)
					}, 0)
				},
				fail: err => {
					opt['fail'] && opt['fail'](err);
					reject(err)
				}
			})
		})
	}

	//post数据请求
	const post = (opt = {}) => {
		let time = new Date().getTime();
		let editHeaders = Object.assign({}, { 'content-type': 'application/json' }, commonHeader())
		opt.headers && (editHeaders = Object.assign({}, editHeaders, opt.headers))
		return new Promise((resolve, reject) => {
			wx.request({
				url: `${baseUrl}${opt.url}?t=${time}`,
				data: opt.data || {},
				header: editHeaders,
				method: "POST",
				success: res => {
					setTimeout(_ => {
						opt['success'] && opt['success'](res.data);
						resolve(res.data)
					}, 0)
				},
				fail: err => {
					opt['fail'] && opt['fail'](err);
					reject(err)
				}
			})
		})
	}

	export default { get, post };

	// 代码示例
	let shopInfo = async _ =>{
		let data1 = await this.util.post({
			url:'http://XXXXXX',
			data:{
				demo:'111'
			}
		})
		console.log(data1)
		let data2 = await this.util.post({
			url:'http://XXXXXX',
			data:{
				demo:'111'
			}
		})
		console.log(data2)
	}
	
	//async函数内部抛出错误，会导致返回的 Promise 对象变为reject状态
	
	//抛出的错误对象会被catch方法回调函数接收到
	
	shopInfo().then(res=>{console.log(res)}).catch(err=>{console.log(err)})

		
	// 小程序内部是不能手动去刷新页面的，这就为状态管理的实现提供了可能性
	
	// 某些状态不需要长期存储，索性投入vuex的怀抱吧。。。
	
	// 引用数据请求
	import util from './utils/index';
	Vue.prototype.util = util;
	// 引用toast提示
	import msg from './utils/toast';
	Vue.prototype.msg = msg;
	// 引用vuex
	import store from './store/index';
	Vue.prototype.$store = store;
	
	// 发起action => 
	
	this.$store.dispatch('code',{a:1,b:2})
	
	// 获取state数据 =>
	
	this.$store.state.mutations

	// store/index.js
	import Vue from 'vue';
	import Vuex from 'vuex';
	import mutations from './mutations';
	import actions from './actions';
	Vue.use(Vuex)
	export default new Vuex.Store({
		modules:{
			mutations
		},
		actions
	})
	
	
	// store/types.js
	import keymirror from 'keymirror'
	let types = keymirror({
	    COMMIT_CODE:null,
	})
	export {types};
	
	
	// store/actions.js
	import {types} from './types.js'
	const actions = {
	    code({commit},val){
	        commit(types.COMMIT_CODE,val)
	    },
	}
	export default actions;
	
	
	// store/mutations.js
	import {types} from './types.js'
	// 定义state的值
	const state = {
	    qrcode:null
	}
	// 每个action的提交引发state的改变
	const mutations = {
	    [types.COMMIT_CODE](state,val){
	        state.qrcode = val
	    },
	}
	// 获取到变化的值
	const getters = {
	    qrcode(state){
	        return state.qrcode;
	    }
	}
	// 导出
	export default{
		state,
		mutations,
		getters
	}

	//获取线上图片生成本地临时路径
	const downImg = val => {
		return new Promise((resolve, reject) => {
			//判断本地图片路径是否存在
			if (val.indexOf('wxfile://') == -1) {
				wx.downloadFile({
					url: val,
					success: res => {
						resolve(res.tempFilePath)
					},
					fail: err => {
						reject(err)
					}
				})
			} else {
				resolve(val)
			}
		})
	}

	Promise.all([this.downImg(this.QrCodeUrl),
			this.downImg(this.Logo)
	]).then(res=>{
			console.log(res,111)
	}).catch(err=>{
			console.log(err,222)
	})

	/**
	 * ctx,画布对象
	 * str,需要绘制的文字
	 * splitLen,切割的长度字符串
	 * strHeight,每行文字之间的高度
	 * x,位置
	 * y,位置
	 */
	fontLineFeed(ctx, str, splitLen, strHeight, x, y) {
		let strArr = [];
		for (let i = 0, len = str.length / splitLen; i < len; i++) {
			strArr.push(str.substring(i * splitLen, i * splitLen + splitLen));
		}
		if (str.length > splitLen) {
			strArr[0] = strArr[0] + '...';
		}
		// console.log(strArr[0])
		// let s = 0;
		// for (let j = 0, len = strArr.length; j < len; j++) {
		//     s = s + strHeight;
		//     ctx.fillText(strArr[j], x, y + s);
		// }
		ctx.fillText(strArr[0], x, y);
	}

	let index = getCurrentPages().findIndex(e => e.route == 'pages/index/main');
	if (index > -1) {
		wx.navigateBack({
			delta: getCurrentPages().length - 1 - index
		})
	} else {
		wx.navigateTo({
			url: '/pages/index/main'
		})
	}

	//path路径 示例：'pages/index/main'  如果路径带参数，需要indexOf处理一下
	const goPath = path => {
		let index = getCurrentPages().findIndex(e => path.indexOf(e.route) > -1);
		if (index > -1) {
			getCurrentPages()[index].onUnload();
			wx.navigateBack({
				delta: getCurrentPages().length - (index > 0 ? index + 1 : index),
				success: res => {
					setTimeout(_ => {
						wx.redirectTo({
							url: `/${path}`
						})
					}, 500)
				},
				fail: err => {}
			})
		} else {
			wx.navigateTo({
				url: `/${path}`
			})
		}
	}

	const isAuth = (name) => {
		return new Promise((resolve, reject) => {
			wx.getSetting({
				success: (res) => {
					if (res.authSetting[name]) {
						resolve();
					} else {
						reject();
					}
				},
				fail: (err) => {
					reject(err);
				}
			})
		})
	}

	fail: err => {
		wx.hideLoading();
		//无定位判断
		if(wx.getStorageSync('QQmap')&&!wx.getStorageSync('QQmap').mapGet){
			reject('位置信息获取失败，启用无定位搜索');
		}else{
			wx.getSetting({
				success: ok => {
					if(!(ok.authSetting['scope.userLocation'])){
						//小程序位置信息权限关闭
						console.log('小程序定位未开启')
						model(1);
					}else{
						console.log('手机定位未开启')
						model(2);
					}
				},
				fail: error => {
						console.log('权限获取失败')
				}
			})
			reject('位置信息获取失败');
		}
	}

	const model = val => {
		wx.showModal({
			title: '定位失败',
			content: `未获取到你的地理位置，请检查${val==1?'小程序':'微信APP'}是否已关闭定位权限，或尝试重新打开小程序`,
			// showCancel:false,
			success: res => {
				if (res.confirm) {
					console.log('用户点击确定')
					if(val==1){
						wx.redirectTo({
							url: '/pages/wx-auth/main?type=1'
						})
					}
					//调用wxLogin接口
				} else if (res.cancel) {
					console.log('用户点击取消')
					// model(val);
					//调用wxLogin接口 
				}
			}
		})
	}

    this.$forceUpdate();

	Object.assign(this.$data, this.$options.data())

	// ./src/app.vue
	import Raven from 'sentry-weapp'
	export default {
		onLaunch() {
			Raven.config('https://[email protected]/x', {
				release: '1.0.0', //版本号
				environment: 'production',
				allowDuplicates: true, // 允许相同错误重复上报
				sampleRate: 0.5 // 采样率
			}).install()
		},
		onError(msg) {
			// Raven.captureException(msg)
			Raven.captureException(msg, {
				level: 'error'
			})
		}
	}

	// ./build/webpack.prod.conf.js
	new UglifyJsPlugin({
		sourceMap: true
	})

	// ./config/index.js文件
	build: {
		// ...
		productionSourceMap: true, // 生产环境开启map文件生成
		// ...
	}

	//src/main.js
	const wx = require('weixin-js-sdk');
	//挂载原型
	Vue.prototype.wx = wx;
	//页面跳转小程序
	this.wx.miniProgram.reLaunch({
		url: "/pages/index/index"
	})