mp_exhibitor_miniprog

项目的目录结构

目录	名称	备注
api	接口请求	按服务端接口模块创建js文件,关联后端请求
compontents	全局前端组件	和业务属性无关联的通用组件
｜－common	公共组件	u-dropdown-select 分类选择(支持一级或二级) u-scroll-view (自动全屏的滚动视图) u-swiper 实现各类轮播
｜－layout	布局组件	nav-bar 顶部导航 tab-bar 底部导航
locales	多语种	实现前端多语种
pages	小程序页面	所有的小程序页面与页面片段 (与业务属性相关)
static	静态资源	图片/字体/CSS (图片尽可能放到oss,小程序有限制大小)
｜－style/pages	页面样式	页面可复用的样式放置到这个文件夹, 不可复用的样式仍放到page的style标签内
store	数据存储	固定或临时数据的存储
unpackage	hbuilder编译的微信小程序代码
utils	工具类	request.js 网络请求 event-bus.js 消息总线 font.js 加载字体 auth.js 授权token index.js 公共函数
wxcomponents	小程序原生组件
｜－ vant	vant-weapp组件(请不要重新下载覆盖, 部分组件js有修改, 非必要不修改)

配置文件

process.env 配置

package.json 的 env节点

`

"uni-app": {
	"scripts": {
		"dev": {
			"title": "小程序-开发环境",
			"env": {
				"UNI_PLATFORM": "mp-weixin",
				"NAME": "dev",
				"TOKEN_KEY": "token",
				"BASE_API": "https://starify-api-dev.matchexpo.cn"
			},
			"define": {
				"MP-CJN": true
			}
		},

`

基本开发规范

缩进

样式与javascript的缩进统一为2个空格,通过修改hbuilder的配置实现

CSS样式表

• 只允许使用class选择器
• class定义需使用英文小写 + "-" 组成, 与第三方组件保持统一
• style不加scope属性
• 字体大小使用uni.scss中定义的变量
• 通用的主题色值,必须使用uni.scss中定义的变量
• 所有尺寸都使用rpx单位进行定义
• 已在app.scss定义了全局字体Arial, 页面与组件不需要再定义了

javascript

• 变量与属性使用驼峰命名法
• 常量用const, 变量let, 不允许使用var
• 每个代码行结尾不要加";"

• 慎用hbuilder的自动代码格式化

  数据的存储与引用

• 使用数据 this.$store.gettings.数据名

• 存储数据 this.$store.commit(方法名, 数据值)

  文件目录

• pages/功能模块/components 用于存放业务相关的组件

• 根目的components用于存放通用组件

  参考文档

• vant-weapp官方文档vant参考文档

• uniapp文档: 参考文档

  FAQ

  uni.scss 与 app.scss有什么区别?

  uni.scss可用于定义变量, mixin等, 编译小程序代码后,它会被复制到每一个style元素中.易造成冲突且体积较大
  app.scss定义全局公共样式,一次引用,所有页面生效

  怎么引用第三方字体?

• 不支持全局引用且只支持网络链接字体(上传到OSS)

• 在每个需要使用第三方字体的page的created里调用 this.loadFontFace(字体名字), 修改main.js的loadFontFace方法以支持新字体

• 不要使用过多的第三方字体,以免卡顿.

• 部分情况可以使用图片替换特殊字体

  App.vue里的onLaunch不执行?

  这个文件应该是uniapp针对web应用的, 微信小程序不会执行

  页面的 created 和 onShow 有什么区别?

  created只要页面第一次打开时执行, 如果跳转到其它页面再返回则不会执行, 可使用onShow

  如何创建一个新页面?

• 在pages里创建页面.vue(或模块目录)并在根目录的pages.json文件里配置路径

• 如编译时默认打开该页面,在微信开发者工具里的添加编译模式选择特定页面

  怎么实现样式的穿透?

• 穿透指的是上级页面或组件想覆盖子组件的样式

• 并不支持::v-deep这类写法

• 需在页面或组件中的script增加styleIsolation,并设置为shared

  export default {
  	options: {
  		styleIsolation: 'shared'
  	},
  

  怎么控制用户的授权

• 正常情况下，若page不允许非授权状态下的访问，可以created里加上this.checkAuth(当前页面的路径)，会自动跳转登录

  定义事件用@还是小程序原生的bind...?

• 为保证代码风格统一尽量使用@事件名来监听

• @和bind对应的event数据结构会略有不同, 如遇问题可用console.log查看

  第三方的vant组件的字体过大

• vant默认是使用单位px, 需要在style/vant.scss文件中覆写样式

  如何更新iconfont图标

• 从iconfont网站下载解压后,拷贝iconfont.ttf和iconfont.woff2

• iconfont.woff2用于微信开发者工具

• iconfont.ttf用于真机

• iconfont.css不要直接覆盖, 因为最顶部的@font-face定义已修改, 复制时需保留原有的@font-face 注意!!!

  每个页面都需要放1个nav-bar吗?

• 是的, 即使不显示nav-bar(如user/login页面)也需要,可以设置组件属性为透明色.

• nav-bar可以解决浏海屏状态栏高度的问题

  如何在小程序中访问网页?

• 需要微信小程序后台配置安全域名

• 通过pages/index/webview组件进行返回

• this.navigateTo支持访问网络地址,自动调用webview

  如何实现滚动底部加载更多?

• 监听 u-scroll-view的scroll-near-lower事件

• uniapp文档: 参考文档

  如何修改小程序appId

• 通过hbuilder修改manifest.json

  页面常用的函数?

  导航

• this.navigateTo(地址) 导航下一个页面(支持https网格地址或pages本地页面地址)

• this.redirectTo(地址) 切换当前页面到另一个页面(支持https网格地址或pages本地页面地址)

  消息提示

• this.showToast(消息文本) 不带图标的消息提示

• this.showSuccessToast(消息文本) 带成功图标的消息提示

• this.showFailToast(消息文本) 带失败图标的消息提示

• this.showLoading() 显示加载中

• this.hideLoading() 隐藏加载中

  对话框

• this.showAlertDialog(消息文本) 带1个确认按钮的对话框

• this.showConfirmDialog(消息文本) 带1个确认按钮和1个取消按钮的对话框