uniapp入门笔记20200901。uni-app也就出来了1年多,不到2年。

1.安装npm,修改npm慢配置

全局安装vuenpm install -g @vue/cli 有的插件报错,还要安装npm install -D sass-loader node-sass

2.创建项目
使用正式版(对应HBuilderX最新正式版)
vue create -p dcloudio/uni-preset-vue my-project
3.运行npm run serve,或者npm run dev:h5
4.发布npm run build:h5

5.打包h5,相对路径配置。

src\manifest.json里面的字段"app-plus" : {}里面加

    "h5" : {
        "router" : {
            "base" : "./"
        }
    }

6.各组件用法

https://uniapp.dcloud.io/component/view
官方插件例子:https://hellouniapp.dcloud.net.cn/pcguide.html#/pages/component/view/view

7.css要注意的地方:

1)margin和padding一起用的时候,注意要用box-sizing: border-box;来限制一下,才能正常。
2)加粗用 font-weight: bold;
3)view一行显示要用

.uni-flex {
    display: flex;
    flex-direction: row;
}

4)居中,可以外面view用padding来限制,里面用width:100%就可以了
5)固定定位到底部:

position: fixed;
left: 0rpx;
bottom: 90rpx;

6)设置了宽高还是不能全屏显示的按钮,加:

background: url(../../static/imgBtn/btnBuy.png);
background-size: 100%;

7)view里面文字居中设置,可用flex,

display: flex;
justify-content: center;
align-items: center;

8)安装 uni-ui: https://github.com/dcloudio/uni-ui
npm install @dcloudio/uni-ui -D

8.插件使用
npm i node-sass -D
npm i sass-loader -D

插件拷贝到components 目录下

9.去除左上角返回按钮

page页面加

"style": {
    "navigationBarTitleText": "SECT",
    "titleNView":false
}

或者用uni.redirectTo打开界面,不用uni.navigateTo({ url: '../reg/reg' });

10全局变量

a)加config.js文件,内容:

export default {
    gdomain: 'http://192.168.0.1/',
}

b)在main.js中写入:Vue.prototype.gdomain = config.gdomain;
c)在vue中使用console.log(this.gdomain) 即可了
全局变量官方文档 https://ask.dcloud.net.cn/article/35021
其他 https://www.uviewui.com/guide/globalVariable.html

11 post使用
uni.request({
    url: 'http://192.168.0.100/api', //仅为示例,并非真实接口地址。
    method: 'POST',
    data: {
        accountName: 'uni.request',
        password: '123456'
    },
    header: {
        'Content-Type': 'application/json'
    },
    method: 'POST',
    dataType: 'json',
    success: (res) => {
        console.log('返回', res.data);
    }
});

https://uniapp.dcloud.io/api/request/request?id=request

12 安装npm库

npm install packageName --save
使用,安装完即可使用npm包,js中引入npm包:
import package from 'packageName'
const package = require('packageName')

13 超级好用的截图软件 Snipaste-2.5.1-Beta-x64 https://www.snipaste.com/
14 uni-app复制插件 https://ext.dcloud.net.cn/plugin?id=2295
14 返回界面
uni.navigateBack({  
   delta: 2  
});  
14 弹出框 https://ext.dcloud.net.cn/plugin?id=329
15 H5打包,自定义引用:https://uniapp.dcloud.io/collocation/manifest?id=h5-template
15 uni-app可以开发pc端网站吗?

uni-app本来也可以开发web界面,只是内置组件对宽屏没有自动适配。你可以:

  1. 新建uni-app项目,但不使用内置组件,而是直接用三方ui库,比如elementUI。这些基于vue的、适合宽屏使用的ui库可以直接用。至于js api,仍然使用uni的,比如uni.setStorage等。插件市场有很多插件参考:vue-admin-beautiful
  2. 继续使用内置组件,自己处理pc适配:如果要多端适配界面,使用css的媒体查询处理适配。uni-app的内置组件和api仅适配了webkit内核浏览器。
16 注意打包的h5模板index.html要配置好目录,相对于manifest.json的目录的,应该是../index.html的上级目录。
17 非H5 端,不能使用浏览器自带对象,比如document、window、localstorage、cookie 等
18

标签: uniapp

添加新评论