uni-app学习入门-框架总结

目录

pages.json

package.json

manifest.json

App.vue

vue.config.js

框架接口

HBuilderX中快捷键

---

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,
        "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方式 （是一种特殊的图片格式，可以制定特定的区域进行拉升而不失真）http://inloop.github.io/shadow4android/
• 自定义IOS：storybord方式（是Apple提供的一种简化的布局界面，通过xml描述界面，不能编程）使用mac电脑中的xcode

App.vue

• 是页面入口文件，但App.vue本身不是页面，不能编写视图元素、不能写模板
• 应用生命周期仅可在App.vue中监听，在页面监听无效
• 作用：调用应用生命周期函数、配置全局样式、配置全局的存储globalData

vue.config.js

//自定义静态资源目录
const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin') //最新版本copy-webpack-plugin插件暂不兼容，推荐v5.0.0

module.exports = {
    configureWebpack: {
        plugins: [
            new CopyWebpackPlugin([
                {
                    from: path.join(__dirname, 'src/images'),
                    to: path.join(__dirname, 'dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev', process.env.UNI_PLATFORM, 'images')
                }
            ])
        ]
    }
}

//注入全局依赖
const webpack = require('webpack')

module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                'localStorage': ['mp-storage', 'localStorage'],
                'window.localStorage': ['mp-storage', 'localStorage']
            })
        ]
    }
}

//发布时删除console
module.exports = {
    chainWebpack: (config) => {
        // 发行或运行时启用了压缩时会生效
        config.optimization.minimizer('terser').tap((args) => {
            const compress = args[0].terserOptions.compress
            // 非 App 平台移除 console 代码(包含所有 console 方法，如 log,debug,info...)
            compress.drop_console = true
            compress.pure_funcs = [
                '__f__', // App 平台 vue 移除日志代码
                // 'console.debug' // 可移除指定的 console 方法
            ]
            return args
        })
    }
}

框架接口

getApp() 函数：用于获取当前应用实例，一般用于获取globalData

//JS中操作globalData
getApp().globalData.text=''

//onLaunch中getApp对象还未获取时
this.$scope.globalData.text=''

getCurrentPages() 函数：用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面 ，仅用于展示页面栈的情况，请勿修改页面栈，以免造成页面状态错误

//当前页面栈
let pages = getCurrentPages();

//当前页面
let prevPage = pages[pages.length - 1];
let prevPage = pages.pop()

//当前页面的路由，输出为pages/index/index
console.log(prevPage.route)

//进入小程序非默认首页时，需要提供返回首页的按钮或者执行其它事件
onShow() {
    let pages = getCurrentPages(); //当前页面栈
    if (pages.length == 1) {
        //todo
    }
}

//跨页面赋值
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;
        page.onLoad(); //或者其它操作
    }
})

//获取当前页面 webview 的对象实例
export default {
    data() {
        return {
            title: 'Hello'
        }
    },
    onLoad() {
        // #ifdef APP-PLUS
        const currentWebview = this.$scope.$getAppWebview();
        //动态重设bounce效果
        currentWebview.setBounce({ position: { top: '100px' }, changeoffset: { top: '0px' } }); 
        // #endif
    }
}

//获取指定页面 webview 的对象实例
var pages = getCurrentPages();
var page = pages[pages.length - 1];
// #ifdef APP-PLUS
var currentWebview = page.$getAppWebview();
console.log(currentWebview.id);//获得当前webview的id
console.log(currentWebview.isVisible());//查询当前webview是否可见
// #endif

⚠️ 注意

• navigateTo, redirectTo 只能打开非 tabBar 页面。
• switchTab 只能打开 tabBar 页面。
• reLaunch 可以打开任意页面。
• 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
• 不能在 App.vue 里面进行页面跳转

页面通讯

uni.$emit(eventName,OBJECT)：监听全局传对象

uni.$on(eventName,callback)：监听全局传回调

uni.$once(eventName,callback)：监听全局只一次

uni.$off([eventName, callback])：移除监听器

⚠️ uni.$off

• 如果没有提供参数，则移除所有的事件监听器；
• 如果只提供了事件，则移除该事件所有的监听器；
• 如果同时提供了事件与回调，则只移除这个回调的监听器；
• 提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器；

uni.$emit('update',{msg:'页面更新'})

uni.$on('update',function(data){ console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg); })

uni.$once('update',function(data){ console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg); })

//$emit、$on、$off常用于跨页面、跨组件通讯
<template>
    <view class="content">
        <view class="data">
            <text>{{ val }}</text>
        </view>
        <button type="primary" @click="comunicationOff">结束监听</button>
    </view>
</template >

<script>
    export default {
        data() {
            return {
                val: 0
            }
        },
        onLoad() {
            setInterval(() => {
                uni.$emit('add', { data: 2})
            }, 1000)
            uni.$on('add', this.add)
        },
        methods: {
            comunicationOff() {
                uni.$off('add', this.add)
            },
            add(e) {
                this.val += e.data
            }
        }
    }
</script>

HBuilderX中快捷键

clog：console.log()

clogv：console.log("："+ )