uniapp技巧，uni-app入门笔记
uniapp技巧，uni-app入门笔记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-project3.运行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-uinpm 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' });
如果跳转到首页,有tarbar的需要用switchTab跳转
uni.switchTab({
url: '/pages/tabbar/user'
})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界面，只是内置组件对宽屏没有自动适配。你可以：
- 新建uni-app项目，但不使用内置组件，而是直接用三方ui库，比如elementUI。这些基于vue的、适合宽屏使用的ui库可以直接用。至于js api，仍然使用uni的，比如uni.setStorage等。插件市场有很多插件参考：vue-admin-beautiful。
继续使用内置组件，自己处理pc适配：如果要多端适配界面，使用css的媒体查询处理适配。uni-app的内置组件和api仅适配了webkit内核浏览器。
16 注意打包的h5模板index.html要配置好目录，相对于manifest.json的目录的，应该是../index.html的上级目录。
17 非H5 端，不能使用浏览器自带对象，比如document、window、localstorage、cookie 等
2021.4.20 更新
18 设置底部导航栏目，在pages.json里面加一个tabBar配置
"tabBar": { "color": "#C0C4CC", "selectedColor": "#ff536f", "borderStyle": "black", "backgroundColor": "#ffffff", "list": [{ "pagePath": "pages/index/index", "iconPath": "static/tabbar/tab-home.png", "selectedIconPath": "static/tabbar/tab-home-current.png", "text": "首页" }, { "pagePath": "pages/menuMy/menuMy", "iconPath": "static/tabbar/tab-user.png", "selectedIconPath": "static/tabbar/tab-user-current.png", "text": "我的" } ]19 ts版的uniapp，看着还可以 https://hhyang.cn/v2/
20 uniapp background-image 动态更新
<view class="toplogo" v-bind:style="{backgroundImage:'url('+this.shopInfo.picture_link+')'}">21 uniapp动态切换class
<view :class="[this.isSel? 'cSelTag':'cNoSelTag']" @click="cbSelTag(true)">22 uniapp跳转界面传值，窗体通信、全局变量
23 uniapp image 存在上下边距，怎么去除? 有空白 不是 margin 也不是padding。
给image标签一个
display:block样式就可以了。24 uniapp动态设置元素的高度。那么滚动列表的长度不能给他固定住，因为有的屏幕的比例相对要高一些，所以这个list就要改成动态的
onLoad() { //我们在onload钩子中获取到屏幕可用的高度 //然后减去其他元素的所占的高度总和，那么获取的的就是你要动态设置的元素的高度 //也就实现了自适应的效果,uni.upx2px(810);是uni提供的将rpx转换成px的方法 this.h=uni.getSystemInfoSync().windowHeight-uni.upx2px(810); } <list class="scroller" :style="'height:'+this.h+'px'"></list> data() { return { //对应第一种不用加px h:null, }25 按钮防止穿透,
@click改为@tap.stop，就行了。26 uniapp 通讯录 城市 https://github.com/EveryDayit/city-select
27 uniapp去掉button的黑色边框，在style里面加
button::after { border: none }即可。28 打开客服用button控件，参数open-type有效值填
open-type="contact"，就能打开客服了。29 uniapp事件发送
uni.$emit('update',{msg:'页面更新'}) uni.$on('update',function(data){ console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg); }) uni.$off('add', this.add)30 用css实现字符串截断
.txthide{ overflow:hidden;/*规定当内容溢出元素框时发生的事情*/ text-overflow:ellipsis;/*规定当文本溢出包含元素时发生的事情*/ white-space:nowrap;/*设置如何处理元素内的空白。规定在文本中不进行换行*/ }31 uniapp里面使用uuid，执行
npm install uuidjs32 vfor不更新数据问题。uniapp里面v-for的数据没刷新，解决办法：在最外层加一个v-if更新数据后，赋值false再赋值true
33