| 1 |
- (window.webpackJsonp=window.webpackJsonp||[]).push([[14],{287:function(t,a,s){"use strict";s.r(a);var r=s(13),n=Object(r.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"hi-运动-教练端-小程序"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hi-运动-教练端-小程序"}},[t._v("#")]),t._v(" Hi 运动(教练端)小程序")]),t._v(" "),a("blockquote",[a("p",[t._v("请编辑过的人员留下你的姓名")])]),t._v(" "),a("ul",[a("li",[t._v("文档编辑人员 杜文华(2020/4/27)")])]),t._v(" "),a("h2",{attrs:{id:"项目地址"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#项目地址"}},[t._v("#")]),t._v(" 项目地址")]),t._v(" "),a("ul",[a("li",[t._v("svn://svn.webdev.ouj.com/biz/hiyd_miniprogram/wx")])]),t._v(" "),a("h2",{attrs:{id:"技术选型"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#技术选型"}},[t._v("#")]),t._v(" 技术选型")]),t._v(" "),a("blockquote",[a("p",[t._v("目标:单纯的微信小程序，没有任何跨端的需求")])]),t._v(" "),a("ol",[a("li",[t._v("针对当时有挺多可选择的方案，(1)原生,(2)框架")]),t._v(" "),a("li",[t._v("框架来说，就是更多的用于跨端的，所以感觉没多大必要。但是原生也会有原生的问题")])]),t._v(" "),a("p",[t._v("原生的问题:")]),t._v(" "),a("ol",[a("li",[t._v("比如 npm 的管理就比较棘手，官方的 npm 引入需要构建然后需要外部相对路径的引入，这样的灵活性不太高")]),t._v(" "),a("li",[t._v("对于 sass，TypeScript 等预编译的操作无法实现")]),t._v(" "),a("li",[t._v("不支持 ES7 以上的高级语法，如 async await 等特性")]),t._v(" "),a("li",[t._v("不管是体验版还是开发版只能存在一种环境，一旦发布预览测试环境切换繁琐")]),t._v(" "),a("li",[t._v("缺少集中式的 API 地址和 ENV 环境变量管理")])]),t._v(" "),a("p",[t._v("最终由于技术人员大家的技术都倾向于原生比较容易上手，框架需要再熟悉可能有碍于开发效率等，选择了原生")]),t._v(" "),a("h2",{attrs:{id:"最终的技术栈"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#最终的技术栈"}},[t._v("#")]),t._v(" 最终的技术栈")]),t._v(" "),a("blockquote",[a("p",[t._v("Gulp4.x + TypeScript(后来觉得 wx 的类型可能有点坑就放弃了) + Babel + Scss + 原生小程序内置 Api + jest(单元测试,node 版本要尽量高不然会报错) + Mobx")])]),t._v(" "),a("p",[t._v("5/22注后来发现TypeScript也是可以做的，wx的类型直接引入微信的库就可以了，我们要做的只是用TypeScript转换成JS就可以了")]),t._v(" "),a("h2",{attrs:{id:"项目架构"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#项目架构"}},[t._v("#")]),t._v(" 项目架构")]),t._v(" "),a("div",{staticClass:"language-Bash extra-class"},[a("pre",{pre:!0,attrs:{class:"language-bash"}},[a("code",[t._v("- dist\n- node_modules\n- src\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("- "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(".\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("- __test__ --- jest单元测试\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("- assets --- 静态资源文件"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("*png,*jpg"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("- components --- 公共组件"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("自定义"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("- custom-tab-bar --- 自定义tabbar"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("一定要放在最外层"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("- libs --- 用上了ES7的async的地方都得用这个库 "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("在头部得引入不然会报错"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("- miniprogram_npm --- 小程序的npm\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("- pages --- 页面\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("- "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(".\n\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("- "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(".\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("- router --- 封装的路由\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("- services --- 业务层\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("- lib --- 封装的ajax\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("- styles --- 定义的全局scss\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("- utils --- 工具类\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("- index.d.ts --- 用来提示类型的"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("不是用TypeScript但是可以透过工具达到类型提示的效果"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v("- "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("..")]),t._v(".\n- gulpfile.js --- 构建打包的配置文件\n")])])]),a("h2",{attrs:{id:"开发时发现的问题"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#开发时发现的问题"}},[t._v("#")]),t._v(" 开发时发现的问题")]),t._v(" "),a("h3",{attrs:{id:"_2020-5-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_2020-5-6"}},[t._v("#")]),t._v(" 2020/5/6")]),t._v(" "),a("p",[t._v("小程序的背景图片不能直接引入本地的，可能是因为线上的缘故吧。要转成 base64 或者是引入线上服务器的地址才可以引入。")]),t._v(" "),a("p",[t._v("数据流最后是通过 mobx 进行传递。写了一些例子可能都不太好，没有那种修改了马上更新的操作，放在 globalData 就更加不行")]),t._v(" "),a("p",[t._v("使用 async 的地方都得引入 libs 里面的 runtime 库不然会报错(本地可能不报错，但是线上会报错)")]),t._v(" "),a("h3",{attrs:{id:"_20205-14"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_20205-14"}},[t._v("#")]),t._v(" 20205/14")]),t._v(" "),a("p",[t._v("商品管理的拖动还是存在bug，比如无法实时看到拖动的效果，只能在拖动完最后才能看到效果。(最主要还是安卓存在的性能问题，因为每次都会load图片，安卓load图片就会出现性能的问题，IOS不会有这个问题，实现的原理得自己看下里面的)")]),t._v(" "),a("p",[t._v("保存海报是通过canvas画出来的，所以要看一下对应的微信提供的Api")]),t._v(" "),a("p",[t._v("小程序自带的mobx在App.js无法使用，因为没有办法代理App.js里面的数据。page里面如果在onload，等生命周期使用。得下一轮循环才行(不知道是不是推到微任务里面去了)")]),t._v(" "),a("h3",{attrs:{id:"_2020-5-22"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_2020-5-22"}},[t._v("#")]),t._v(" 2020/5/22")]),t._v(" "),a("p",[t._v("tabPage是自定义，并且是重写了onShow方法，是在Page实例化前调用的，所以在tabPage的onShow里面没有找到当前tabPage的this。")])])}),[],!1,null,null,null);a.default=n.exports}}]);
|
