xiaokuang 550df3c4d1 Merge branch 'zhaosm' of http://120.26.79.179/luxf/mp_exhibitor_miniprog into zhaosm | 1 月之前 | |
---|---|---|
api | 1 月之前 | |
components | 1 月之前 | |
locales | 2 月之前 | |
pages | 1 月之前 | |
static | 1 月之前 | |
store | 1 月之前 | |
utils | 1 月之前 | |
wxcomponents | 1 月之前 | |
.gitignore | 2 月之前 | |
App.vue | 1 月之前 | |
README.md | 1 月之前 | |
index.html | 2 月之前 | |
main.js | 1 月之前 | |
manifest.json | 1 月之前 | |
package-lock.json | 1 月之前 | |
package.json | 1 月之前 | |
pages.json | 1 月之前 | |
uni.promisify.adaptor.js | 2 月之前 | |
uni.scss | 1 月之前 |
目录 | 名称 | 备注 |
---|---|---|
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有修改, 非必要不修改) |
`
"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的配置实现
慎用hbuilder的自动代码格式化
使用数据 this.$store.gettings.数据名
存储数据 this.$store.commit(方法名, 数据值)
pages/功能模块/components 用于存放业务相关的组件
根目的components用于存放通用组件
vant-weapp官方文档vant参考文档
uniapp文档: 参考文档
uni.scss可用于定义变量, mixin等, 编译小程序代码后,它会被复制到每一个style元素中.易造成冲突且体积较大
app.scss定义全局公共样式,一次引用,所有页面生效
不支持全局引用且只支持网络链接字体(上传到OSS)
在每个需要使用第三方字体的page的created里调用 this.loadFontFace(字体名字), 修改main.js的loadFontFace方法以支持新字体
不要使用过多的第三方字体,以免卡顿.
部分情况可以使用图片替换特殊字体
这个文件应该是uniapp针对web应用的, 微信小程序不会执行
created只要页面第一次打开时执行, 如果跳转到其它页面再返回则不会执行, 可使用onShow
在pages里创建页面.vue(或模块目录)并在根目录的pages.json文件里配置路径
如编译时默认打开该页面,在微信开发者工具里的添加编译模式选择特定页面
穿透指的是上级页面或组件想覆盖子组件的样式
并不支持::v-deep这类写法
需在页面或组件中的script增加styleIsolation,并设置为shared
export default {
options: {
styleIsolation: 'shared'
},
正常情况下,若page不允许非授权状态下的访问,可以created里加上this.checkAuth(当前页面的路径),会自动跳转登录
为保证代码风格统一尽量使用@事件名来监听
@和bind对应的event数据结构会略有不同, 如遇问题可用console.log查看
vant默认是使用单位px, 需要在style/vant.scss文件中覆写样式
从iconfont网站下载解压后,拷贝iconfont.ttf和iconfont.woff2
iconfont.woff2用于微信开发者工具
iconfont.ttf用于真机
iconfont.css不要直接覆盖, 因为最顶部的@font-face定义已修改, 复制时需保留原有的@font-face 注意!!!
是的, 即使不显示nav-bar(如user/login页面)也需要,可以设置组件属性为透明色.
nav-bar可以解决浏海屏状态栏高度的问题
需要微信小程序后台配置安全域名
通过pages/index/webview组件进行返回
this.navigateTo支持访问网络地址,自动调用webview
监听 u-scroll-view的scroll-near-lower事件
uniapp文档: 参考文档
通过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个取消按钮的对话框