MpVue开发小程序 整理

项目初始化及项目前期准备：

1. 项目框架选择（mpvue），可以弃用mpvue框架了，官网不维护，社区不完整，可以改用原生开发（初始化命令: vue init mpvue/quickstart my-project）。

2. 项目规范化，使用格式化工具，以及配合使用eslint，做好配置文件的编写。做好打包build等配置。

3. 项目配置文件配置，配置小程序的一些默认配置，路由，navigation，tabBar等信息,如

   Window： {
			“backgroundTextStyle”: “light”,
			“navigationBarBackgroundColor”: “#fff”,
			“navigationBarTitleText”: “独家记忆”,
			“navigationBarTextStyle”: “black”,
			“navigationStyle”: “custom” //使用自定义头部时需要配置
	}。

4. 项目初始化之后，进行小程序静态页面开发。UI设计小程序时，若设计了特殊样式的navigation和tabBar，需要使用自定义。前端开发时，需要充分考虑兼容android，IOS，以及近年出现的iPhoneX等长屏手机的样式兼容问题。（比如iphone底部的tabBar要比其他手机高32px）
5. 登录流程问题：小程序没有cookie，服务器端不能直接注入cookie，若需要使用cookie来做登录，需要前端手动使用小程序的Storage来存储cookie，并在发送请求时在header中添加cookie。调用wx.login登录接口只是获取微信的code临时登录态，需要通过接口来自定义登录态。
6. 进行交互开发前需要配置好，合法请求域名request，socket合法域名，uploadFile合法域名，downloadFile合法域名，所有域名都是使用https协议。这里需要注意一点，需要操作图片时，必须使用wx.downloadFile，或者wx.getImageInfo获取图片信息后在进行操作，如果需要操作 微信头像，需要将微信头像的域名https://wx.qlogo.cn配置到合法downloadFile域名里（本项目需要绘制头像到海报上，初始头像使用的是微信头像，忘记配置微信头像地址，从而绘制失败）。
7. 本项目需要使用字体功能（有3种方案实现），本项目使用微信提供的api：wx.loadFontFace实现，使用字体功能时，一定需要对文件地址做好配置cors跨域配置，content-type：type/ttf*配置（https://developers.weixin.qq.com/miniprogram/dev/api/ui/font/wx.loadFontFace.html），使用css引用fonts的话转换成base64，但是一般体积太大，不可用。

项目开发中遇到的坑：

1. 微信提供的Api：wx.createSelectorQuery()，若元素是通过接口数据动态加载显示的，直接调用该方法时获取高度会为空，可以使用setTimeOut。
2. 微信提供的Api：wx.createAudioContext,该方法要尽量在onLoad生命周期里面初始化，不然很可能play()，pause()方法会失效。
3. input输入换行问题：
   A.需要把字符串放置在 标签内部，不然\n等换行符小程序不能自动识别换行，空格；
   B.后台返回字段中的\n换行符不能换行需要另外处理(数据库里的\n换行符实际上是\n，当然返回到前端我们看到的是\n)，处理方法将\n通过replace方法转换成\n，代码附下：

let result = res.data.data
	result = result.map(item => {
	item.text = item.text.replace(/\n/g, ‘\n’)
	return item
})。

4. 绘制海报进行分享时遇到的问题：按步骤将海报的内容绘制后，最后需要调用ctx.draw()方法将内容绘制到画布上，由于绘制头像，二维码等内容需要通过接口返回，如果直接同步调用该方法，会出现绘制空白，因为接口还没有返回成功就直接绘制了。可以使用async和await语法糖来解决(async 用于申明一个 异步function，而 await 用于等待一个异步方法执行完成)

5. IOS 的 new Date()方法，安卓和pc上面new Date(“2019-09-06 00:00:00”)不会报错，但是在IOS上new Date(“2019-09-06 00:00:00”)会报错(无效的参数)
   解决方案：时间格式都使用new Date(“2019/09/06 00:00:00”)就是把-替换成/
   dateStr.replace(new Regex(’-’,‘gm’),’/’)。

6. 补充一个遇到的坑：IOS上new RegExp()方法报错(本项目直接使用let=/…/g这种方式好像在ios也报错)，本项目中需要在返回的set-cookies中截取需要的cookie值，起初使用new RegExp()的正则方法来截取，在安卓手机上正常，在IOS上真机调试时报错，最后只能使用其他方法解决（使用split手动截取字符串）

7. 小程序路由是个非常大的坑，尽量在做程序的时候一定要提前做好页面逻辑，避免重复的跳转，就是打开重复页面，每个页面的返回按钮，也只返回上一个页面。比如本项目的登录，在项目中统一进行了401未登录统一跳转登录页的逻辑处理，但是使用手机自带的物理返回时会强制返回上一个页面一次。

项目开发中总结的经验：

1. 小程序开发由于路由跳转方式的特殊性，大部分页面需要进行初始化！尽量在每个页面定义init()初始化方法，并在onLoad()生命周期里调用。
2. onShareAppMessage分享功能，往往需要在分享路径path上加上参数(比如isFromShare),来判断是由分享进入的，从而来做由分享内容进入的跳转逻辑。
3. 小程序还没有监听手机物理返回键的api，手机自带的物理返回键，强制使用了 wx.navigateBack({delta: 1})强制返回上一个页面。所以确定要做物理返回键的逻辑时，可以在onUnload周期里通过getCurrentPages()方法来做逻辑跳转。
4. 由于小程序发布需要审核，时间有可能会很长，所以，可以将小程序的css样式表，常用js方法，全部放置在cdn服务器上，在小程序中调用http链接，这样如果小程序需要进行小范围的主题样式修改，小细节修改，可以直接修改cdn上的css，js资源，而不需要重新发布审核（本项目没有使用，有点混乱）
5. 小程序上传压缩包上限 最大上传2M（2M已经可以开发出很强大的功能了），如果项目有大量大体积图片，也最好上传到cdn服务器上后使用https链接，超过2M代码，需要进行分包处理
6. 小程序wx.showToast()与wx.hideLoading()冲突。使用wx.hideLoading()之后，如果再想要弹框提示，会发现在调试工具上正常显示，但是在真机测试中就是不显示。总结发现是因为wx.showToast()与wx.hideLoading()冲突。解决方法：避开在(同一层scope域)showToast前面使用wx.hideLoading()，因为showToast本身就具备隐藏wx.showLoading()提示框的功能。
7. 项目中使用了官方提供的scroll-view组件，实现加载更多功能，DOM结构如下

  <scroll-view>
		<div class=”list”>列表...</div>
		<div class=”no-more”>没有更多</div>
	</scroll-view>

起初 在no-more样式使用margin-bottom：90px来预留底部空隙，但是在IOS手机上由于手机自带的弹性滚动功能导致无法滚动到底部。采用padding-bottom:90px方式则可以正常滚动到底部。