uni-app学习⼊门-框架总结
⽬录
pages.json
全局配置，页⾯路由、窗⼝样式、原⽣导航栏、底部原⽣tabbar
配置项
globalStyle：默认页⾯窗⼝表现
pages：设置页⾯路径及窗⼝表现
easycom：组件⾃动引⼊规则
tabBar：设置底部tab表现
condition：启动模式配置
subPackages：分包加载配置
preloadRule：分包预下载规则 --⼩程序
workers：worker代码放置⽬录--⼩程序
leftWindow：⼤屏左侧窗⼝ --H5
topWindow：⼤屏顶部窗⼝ --H5
rightWindow：⼤屏右侧窗⼝ --H5
{
"pages": [{
"path": "pages/component/index",
"style": {
"navigationBarTitleText": "组件"
}
}, {
"path": "pages/API/index",
"style": {
"navigationBarTitleText": "接⼝"
}
}, {
"path": "pages/component/view/index",
"style": {
"navigationBarTitleText": "view"
}
}],
"condition": { //模式配置，仅开发期间⽣效
"current": 0, //当前激活的模式（list 的索引项）
"list": [{
"name": "test", //模式名称
"path": "pages/component/view/index" //启动页⾯，必选
}]
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "演⽰",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"usingComponents":{
"collapse-tree-item":"/components/collapse-tree-item"
},
"renderingMode": "seperated", // 仅⼩程序，webrtc ⽆法正常时尝试强制关闭同层渲染
"pageOrientation": "portrait", //横屏配置，全局屏幕旋转设置(仅 APP//QQ⼩程序)，⽀持 auto / portrait / landscape        "rpxCalcMaxDeviceWidth": 960,
"rpxCalcBaseDeviceWidth": 375,
"rpxCalcBaseDeviceWidth": 375,
"rpxCalcIncludeWidth": 750
},
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"height": "50px",
"fontSize": "10px",
"iconWidth": "24px",
"spacing": "3px",
"list": [{
"pagePath": "pages/component/index",
"iconPath": "static/image/icon_component.png",
"selectedIconPath": "static/image/icon_component_HL.png",
"text": "组件"
}, {
"pagePath": "pages/API/index",
"iconPath": "static/image/icon_API.png",
"selectedIconPath": "static/image/icon_API_HL.png",
"text": "接⼝"
}],
"midButton": {
"width": "80px",
"height": "50px",
"text": "⽂字",
"iconPath": "static/image/midButton_iconPath.png",
"iconWidth": "24px",
"backgroundImage": "static/image/midButton_backgroundImage.png"
}
},
"easycom": {
"autoscan": true, //是否⾃动扫描组件
"custom": {//⾃定义扫描规则
"^uni-(.*)": "@/components/uni-$1.vue"
}
},
"topWindow": {
"path": "responsive/top-window.vue",
"style": {
"height": "44px"
}
},
"leftWindow": {
"path": "responsive/left-window.vue",
"style": {
"width": "300px"
}
},
"rightWindow": {
"path": "responsive/right-window.vue",
"style": {
"width": "300px"
},
"matchMedia": {
"minWidth": 768
}
}
}
⾃定义导航拦：
当navigationStyle:custom或 titleNView:false时原⽣导航栏不显⽰
App和H5下处理⽅案：titleNView、subNVue、整页使⽤nvue、条件编译多端处理
实现滚动时标题栏透明渐变：
pages.json中配置titleNView下type=transparent
实现滚动吸顶固定某元素：
使⽤css粘性布局
package.json
⚠  package.json中不能出现注释
UNI_PLATFORM：
h5、mp-weixin、mp-alipay、mp-baidu、mp-toutiao、mp-qq
BROWSER：
Chrome、Firefox、IE、Edge、Safari、HBuilderX
前提：UNI_PLATFORM=h5
//package.json
//通过增加uni-app扩展节点，实现⾃定义条件编译
{
"uni-app": {
"scripts": {
"h5-weixin": {
"title":"服务号",
"BROWSER":"Chrome",
"env": {
"UNI_PLATFORM": "h5"
},
"define": {
"H5-WEIXIN": true
}
}
}
}
}
/
/代码块中使⽤:
// #ifdef H5-WEIXIN
服务号特有代码
// #endif
//vue-cli的terminal:
npm run dev:custom h5-weixin
npm run build:custom h5-weixin
HBuilderX会根据package.json的扩展配置，在运⾏、发⾏菜单下，⽣成⾃定义菜单（服务号）
manifest.json
App启动界⾯配置
通⽤启动界⾯：以App的logo、name为元素、⾃动⽣成适配不同屏幕尺⼨、适配不通OS要求的启动界⾯
⾃定义Android：.g.png⽅式 （是⼀种特殊的图⽚格式，可以制定特定的区域进⾏拉升⽽不失真）
⾃定义IOS：storybord⽅式（是Apple提供的⼀种简化的布局界⾯，通过xml描述界⾯，不能编程）使⽤mac电脑中的xcode
App.vue
是页⾯⼊⼝⽂件，但App.vue本⾝不是页⾯，不能编写视图元素、不能写模板
应⽤⽣命周期仅可在App.vue中监听，在页⾯监听⽆效
作⽤：调⽤应⽤⽣命周期函数、配置全局样式、配置全局的存储globalData
//⾃定义静态资源⽬录
const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin') //最新版本copy-webpack-plugin插件暂不兼容，推荐v5.0.0
configureWebpack: {
plugins: [
new CopyWebpackPlugin([
{
from: path.join(__dirname, 'src/images'),
to: path.join(__dirname, 'dist', v.NODE_ENV === 'production' ? 'build' : 'dev', v.UNI_PLATFORM, 'images')                }
])
]
}
}
//注⼊全局依赖
const webpack = require('webpack')
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
'localStorage': ['mp-storage', 'localStorage'],
'window.localStorage': ['mp-storage', 'localStorage']
})
]
}
}
//发布时删除console
chainWebpack: (config) => {
// 发⾏或运⾏时启⽤了压缩时会⽣效
config.optimization.minimizer('terser').tap((args) => {
const compress = args[0].terserOptionspress
// ⾮ App 平台移除 console 代码(包含所有 console ⽅法，如 log,)
compress.drop_console = true
compress.pure_funcs = [
'__f__', // App 平台 vue 移除⽇志代码
/
/ 'console.debug' // 可移除指定的 console ⽅法
]
return args
})
}
}
框架接⼝
getApp() 函数：⽤于获取当前应⽤实例，⼀般⽤于获取globalData
//JS中操作globalData
getApp().=''
//onLaunch中getApp对象还未获取时
this.$=''
getCurrentPages() 函数：⽤于获取当前页⾯栈的实例，以数组形式按栈的顺序给出，第⼀个元素为⾸页，最后⼀个元素为当前页⾯ ，仅⽤于展⽰页⾯栈的情况，请勿修改页⾯栈，以免造成页⾯状态错误
//当前页⾯栈
let pages = getCurrentPages();
//当前页⾯
let prevPage = pages[pages.length - 1];
let prevPage = pages.pop()
//当前页⾯的路由，输出为pages/index/index
console.ute)
//进⼊⼩程序⾮默认⾸页时，需要提供返回⾸页的按钮或者执⾏其它事件
onShow() {
let pages = getCurrentPages(); //当前页⾯栈
if (pages.length == 1) {
//todo
}
}selectediconpath什么意思
//跨页⾯赋值
let pages = getCurrentPages();//当前页⾯栈
let prevPage = pages[pages.length - 2];//上⼀页⾯
prevPage.setData({
//直接给上⼀页⾯赋值
});
/
/页⾯跳转后⾃动刷新
wx.switchTab({
url: '../index/index',
success: function (e) {
var page = getCurrentPages().pop(); //当前页⾯
if (page == undefined || page == null) return;
}
})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。