Geen omschrijving

xiaokuang c5ca76832c Merge branch 'zhaosm' of http://120.26.79.179/luxf/mp_exhibitor_miniprog into zhaosm 1 maand geleden
api 93d72b2cfd 全局搜索 1 maand geleden
components c5ca76832c Merge branch 'zhaosm' of http://120.26.79.179/luxf/mp_exhibitor_miniprog into zhaosm 1 maand geleden
locales 145069f222 初始化项目 2 maanden geleden
pages c5ca76832c Merge branch 'zhaosm' of http://120.26.79.179/luxf/mp_exhibitor_miniprog into zhaosm 1 maand geleden
static 2ff0fe7144 样式修改 1 maand geleden
store 37d7dd9eba 字体加载优化 1 maand geleden
utils c5ca76832c Merge branch 'zhaosm' of http://120.26.79.179/luxf/mp_exhibitor_miniprog into zhaosm 1 maand geleden
wxcomponents ceaad61170 代码提交 1 maand geleden
.gitignore 2a74857850 first commit 2 maanden geleden
App.vue 10932348c2 同期活动 1 maand geleden
README.md 546ed1e410 文档修改 1 maand geleden
index.html 145069f222 初始化项目 2 maanden geleden
main.js 076aa5409e 加载字体修改 1 maand geleden
manifest.json 7b49379cce 图标替换 1 maand geleden
package-lock.json 70af04e51e 数据对接 1 maand geleden
package.json 80ef010f8d 合并分支 1 maand geleden
pages.json d906b48c58 合并分支 1 maand geleden
uni.promisify.adaptor.js 145069f222 初始化项目 2 maanden geleden
uni.scss 9fc7ada6fc Merge branch 'dev' into zhaosm 1 maand geleden

README.md

项目的目录结构

目录 名称 备注
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个取消按钮的对话框