移动端使用uniapp技术框架、使用HbuilderX 开发工具开发
遵循开发规范vue 风格指南
开发准备
| 环境 | 版本 | 备注 |
|---|---|---|
| HbuilderX | 最新版 | 开发工具下载 |
项目结构介绍
LaiKePages ├── App.vue #入口 ├── common #通用文件夹 │ ├── public.less #公共样式 │ ├── req #请求封装 │ ├── util.js #公共js │ ├── zh_CN.js #中文包 │ └── zh_EN.js #英文包 ├── components #组件 │ ├── choose-pay.vue #支付选择 │ ├── date-time-picker.vue #日期选择 │ ├── delModel.vue #删除 │ ├── header.vue #顶部导航栏 │ ├── laiketuiCommon.vue #配置文件 │ ├── lktauthorize.vue #通用统一登陆授权组件 │ ├── order #订单组件 │ ├── paymodel.vue #余额支付 密码输入 │ ├── qiyue-richtext #富文本 │ ├── ruleModal.vue #规则弹窗 │ ├── share.vue #分享 │ ├── skeleton.vue # 骨架屏 │ ├── skus.vue # 规则选择 │ ├── time-picker.vue #时间选择 │ ├── toload.vue #加载 │ └── uni-load-more.vue # 上拉加载 ├── guider.png #引导页 ├── laike.less #公共样式 ├── laike.png #app icon ├── main.js #mainjs ├── manifest.json #uniapp 配置 ├── mixins #混入 │ ├── bargain.js #砍价 │ ├── bidding.js #竞拍 │ ├── coupon.js #优惠券 │ ├── order.js #订单 │ ├── pay.js #支付 │ └── seckill.js #秒杀 ├── openpage.png ├── package.json ├── pages #主包 │ ├── address #地址 │ ├── collection #收藏 │ ├── evaluate #评论 │ ├── expressage #物流 │ ├── goods #商品 │ ├── index #分享入口 │ ├── login #登陆 │ ├── message #消息 │ ├── my #我的 │ ├── order #订单 │ ├── pay #支付 │ ├── scavenging #搜索 │ └── tabBar #底部导航 ├── pages.json #页面配置 ├── pagesA #分包 │ ├── afterSale #售后 │ ├── bargain #砍价 │ ├── bidding #竞拍 │ ├── distribution #分销 │ ├── group #拼团 │ ├── myStore #店铺 │ ├── returnGoods #售后 │ ├── search #搜索 │ ├── store #店铺首页 │ ├── vip #会员 │ └── vipClub #会员 ├── pagesB #分包 │ ├── coupon #优惠券 │ ├── expressage #物流 │ ├── home #部分首页组件 │ ├── integral #积分商城 │ ├── myWallet #我的钱包 │ ├── seckill #秒杀 │ ├── setUp #设置 │ └── vip #vip ├── pagesC │ ├── shareDemo #分享 │ └── webView ├── static #静态资源 │ ├── css #样式 │ ├── iconfont #图标 │ ├── img #图片 │ └── js #js脚本 ├── store #vuex │ └── index.js ├── unpackage #打包输出文件夹 │ └── dist └── vue.config.js
注意：新增功能和图片、js 不要写到pages包，小程序上传的大小有限制：2M。
配置修改
1、接口路径配置文件位置
LaiKePages ├── components │ ├── laiketuiCommon.vue #配置文件2、修改的配置内容
/** * 商城ID：在管理后台 商户管理处获取商户id的值 */ const LKT_STORE_ID = 1 /** * 测试环境网关ip */ //const LKT_DOMAIN = "192.168.0.18"; /** * 测试环境网关接口根路径： */ // const LKT_ROOT_URL = 'http://'+LKT_DOMAIN+':18001/gw' /** * 测试环境图片地址： */ // const LKT_ROOT_VERSION_URL = 'http://'+LKT_DOMAIN+':18004/app/' /** * 生产环境网关域名 */ const LKT_DOMAIN = "java.houjiemeishi.com"; /** * 生产环境网关接口访问地址： */ const LKT_ROOT_URL = 'https://'+LKT_DOMAIN+'/gw' /** * 生产环境图片访问地址： */ const LKT_ROOT_VERSION_URL = 'https://'+LKT_DOMAIN+'/pic/' /** * 来客电商H5默认路径:根据实际生产环境h5访问的地址来设置 */ const LKT_H5_DEFURL = "https://java.laiketui.com/#/"H5测试和打包
1、测试
选中左侧项目跟目录，点击hbuilderx-运行-运行到浏览器-chrome，运行完会启动浏览器
2、打包
选中左侧项目跟目录，点击hbuilderx- 发行-网站PC或手机H5(仅适用于uni-app) – chrome，运行完会启动浏览器
出现以下信息表示打包成功
[HBuilder] 10:15:06.208 项目 'javapages' 开始发布h5... [HBuilder] 10:15:06.213 项目 'javapages' 开始编译... [HBuilder] 10:15:07.936 正在编译中... [HBuilder] 10:16:04.554 WARNING: Module Warning (from ./node_modules/postcss-loader/src/index.js): [HBuilder] 10:16:04.652 Warning [HBuilder] 10:16:04.653 (628:3) Gradient has outdated direction syntax. New syntax is like `to left` instead of `right`. [HBuilder] 10:16:04.674 Module Warning (from ./node_modules/postcss-loader/src/index.js): [HBuilder] 10:16:04.674 Warning [HBuilder] 10:16:04.678 (816:3) Gradient has outdated direction syntax. New syntax is like `to left` instead of `right`. [HBuilder] 10:16:04.682 asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). [HBuilder] 10:16:04.685 This can impact web performance. [HBuilder] 10:16:04.690 Assets: [HBuilder] 10:16:04.691 static/js/index.90acfd40.js (466 KiB) [HBuilder] 10:16:04.695 entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance. [HBuilder] 10:16:04.696 Entrypoints: [HBuilder] 10:16:04.704 index (466 KiB) [HBuilder] 10:16:04.708 static/js/index.90acfd40.js [HBuilder] 10:16:04.708 DONE Build complete. [HBuilder] 10:16:04.712 项目 'javapages' 编译成功。 [HBuilder] 10:16:05.655 项目 'javapages'导出h5成功，路径为：/Users/wangxian/Documents/java/javaPages/javapages/unpackage/dist/build/h5 [HBuilder] 10:16:05.661 注意请部署到web服务器使用，不要使用资源管理器直接打开，除非进行相对路径配置，具体参考：https://ask.dcloud.net.cn/article/37432。附录：
1、遵循 vue 官方风格指南
2、必须
style标签必须加上scoped
style标签不加上scoped会导致不同页面之间的样式互相影响好例子
<style lang="less" scoped> .a { /deep/ .b { background: red; } } </style>反例
<style lang="less"> .b { background: red; } </style>引入图片文件必须使用线上路径
在vue 文件里面引入本地文件的方式在
App中无法打开3、强烈推荐
请求接口尽量使用
this.$req.post()方法好例子
laiketuiCommon.vue文件Vue.prototype.$req.post({data})反例
uni.request({ url: me.$store.state.url, data, success: function (res) { resolve(me) }, fail (res) { reject(res) } })使用公共方法进行页面的跳转
参考
doc/navigator.md文件好例子
<text @click="navTo('/pagesB/setUp/paymentPassword')">{{language.paymodel.forgot}}</text>反例
<text @click="forgetPW">{{language.paymodel.forgot}}</text> . . . forgetPW: function () { uni.navigateTo({ url: '../../pagesB/setUp/paymentPassword' }) }4、推荐
尽量使用
async函数来代替原来的Promise语法好例子
class Demo { async index () { await this.f1(); await this.f2(); await this.f3(); console.log('f1 f2 f3 都执行完了') } async f1 () { return new Promise.resolve() } async f2 () { return new Promise.resolve() } f3 () { return new Promise.resolve() } }反例
class Demo { async index () { this.f1().then(() => { this.f2().then(() => { this.f3().then(() => { console.log('f1 f2 f3 都执行完了') }) }) }) } async f1 () { return new Promise.resolve() } async f2 () { return new Promise.resolve() } f3 () { return new Promise.resolve() } }函数命名如非必要不要使用
_xxx函数命名目前的项目没有使用
class的继承特性，用 mixins 的地方也比较少，_函数一般都是只在当前类当中生效，privite 方法，目前的vue文件基本每个文件都是独立的每个方法都是方法没有继承关系，就不要用下划线加函数名称的方式命名了封装的组件在时间允许的情况下尽量把原来需要更换的也换了
时间不允许就另说了
一个列表页应包含以下组件
- toload
- heads
- uni-load-more
- 为空判断
5、不推荐
不要在
vue文件里面写存纯js
components/laiketuiCommon.vue应该拆分成config.js和common.js
lktauthorize验证登录的使用请谨慎使用验证登录功能，无效的校验只会白白的消耗请求资源，例如在个人中心已经登录了。在进订单的时候校验了用户是否登录，进了订单页面再校验一次，到了订单详情再校验一次。这就是属于无效的校验
推荐：在已经登录了的页面就不进行校验，过期了通过接口来进行判断。
如非必要请不要使用
let me = this这样的语法作用域的问题使用箭头函数
好例子
class Demo { constructor() { this.a = '' } async index () { this.f1(() => { this.a = 'xx' }) } f1 (callback) { } }反例
class Demo { constructor() { this.a = '' } async index () { let me = this; this.f1(function () { me.a = 'xx' }) } f1 (callback) { } }如需引入外部的js，需要共享当前对象使用 mixins
less 语法尽量使用嵌套特性，不要和css一样写less
1、全局组件
components 组件 ├── choose-pay.vue #支付选择组件 ├── date-time-picker.vue #时间选择 ├── delModel.vue #删除提示框组件 ├── header.vue #头部组件 ├── laikepay.vue # 支付组件 ├── laiketuiCommon.vue # 基本配置和通用js方法 ├── laiketuiauth # 授权登陆组件 │ ├── mpalipay │ │ └── mpali.vue #支付宝小程序授权登陆组件 │ ├── mpbaidu │ │ └── mpbaidu.vue #百度小程序授权登陆组件 │ ├── mptt │ │ └── mptt.vue #头条小程序授权登陆组件 │ └── mpweixin │ └── mpweixin.vue #微信小程序授权登陆组件 ├── liveItem.vue #微信小程序直播组件 ├── lktauthorize.vue # 授权组件 兼容小程序、app、h5的登陆检测、token检测、回调、未登录设置等 ├── maskM.vue #遮罩层 ├── mp-html #富文本解析 ├── mpvue-citypicker 城市选择器 │ ├── city-data 城市数据 │ │ ├── area.js 区/县 │ │ ├── city.js 市 │ │ └── province.js 省 │ └── mpvueCityPicker.vue ├── mpvue-wxparse # 小程序富文本解析 ├── mpvuePicker.vue #选择器 ├── order 订单组件 │ ├── choose-address.vue #地址选择组件 │ └── submit-order.vue #立即支付按钮组件 ├── paymodel.vue #余额支付密码输入框组件 ├── qiyue-richtext #富文本组件 │ ├── markdown.css #富文本组件 │ └── uni-richtext.vue #富文本组件 ├── ruleModal.vue #插件使用规格说明弹窗 ├── share.vue # 分享组件 app、h5、小程序 ├── skeleton # 骨架 │ └── orderDetailsrMock.vue 订单详情骨架屏 ├── skeleton.vue #骨架屏 ├── skus.vue #商品规格选择组件 ├── time-picker.vue #时间选择组件 ├── toload.vue #加载中组件 └── uni-load-more.vue #加载中组件2、首页组件
├── components # 首页组件 │ ├── blankPage.vue # 辅助空白 │ ├── combination.vue # 拼团 │ ├── guide.vue # 辅助线 │ ├── headerSerch.vue #搜索框 │ ├── homeAdv.vue # 广告位 │ ├── homeBg.vue #背景组件 │ ├── homeStore.vue #首优选店铺 │ ├── homeVideo.vue #首页视频组件 │ ├── index.js │ ├── menus.vue # 导航组 │ ├── reduction.vue # 满减 │ ├── richText.vue #富文本组件 │ ├── seckill.vue #秒杀组件 │ ├── swiperBg.vue #轮播图组件 │ ├── swiperPicture.vue #图片组件 │ └── tabNav.vue #商品分类
