本文主要是介绍uni-app 手记集。，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1、uni-app 是一个使用 Vue.js 开发的前端应用的框架，所以不会Vue.js的小伙伴可以先去看看Vue.js的基础教学。
2、.vue文件结构
<template><div class="container"></div>
</template><script type="text/ecmascript-6">
export default {data(){return{// 数据};},components:{// 组件注册},beforeCreate(){// 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。},create(){// 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。},beforeMount(){// 在挂载开始之前被调用：相关的 render 函数首次被调用。},mounted(){// el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。},beforeUpdate(){// 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。},updated(){// 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。// 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环},beforeDestroy(){// 实例销毁之前调用。在这一步，实例仍然完全可用。 },destroyed(){// Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。},computed:{// 计算属性},watch:{// 数据监听},methods:{// 方法定义}
}
</script>
<style>// css 样式
</style>
各参数/方法使用场景
components:{ // 组件注册 },：局部声明组件create(){ },: 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。mounted(){ }, : 在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。例：比如插件chart.js的使用: var ctx = document.getElementById(ID);computed:{ // 计算属性 }, : 计算属性(computed)是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。watch:{ // 数据监听 }, : Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而，通常更好的做法是使用计算属性而不是命令式的 watch
3.input 通过v-model双向绑定，完成input框值获取。
<template><div><div class="logininfor"><input type="text" placeholder="手机号码" v-model="userphone"><input type="text" placeholder="密码" v-model="userpass"><span @click="register()">注册</span></div><p>已有账号？去<span class="zhuce" @click="login()">登录</span></p></div>
</template>
<script>export default {data(){return{userphone:"",userpass:""}},methods: {register(){window.console.log(this.userphone,this.userpass)}},}
</script>
4、图片选择--选择本地相册
<template><view class="content"><image class="logo" :src="img"></image><view class="text-area"><text class="title">{{title}}</text></view><view class="btn-area"><button @click="onbtn" class="btn_jin">{{btn_jin}}</button></view><view class="btn-area"><button @click="onImg" >更换选择图片</button></view><view class="btn-area"><button @click="onImg2" >更换选择图片2</button></view></view>
</template><script>export default {data() {return {title: 'Hello',btn_jin:'成为企业会员>>',img:'',}},onLoad() {this.img = '../../static/logo.png';},methods: {onbtn(){//页面跳转uni.navigateTo({url: 'JD2BCreateEnterprise?title=jin123'});},onImg(){this.img = '../../static/jd2b_upload_image_add_btn.png';},onImg2(){uni.chooseImage({count: 1, //默认9sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有sourceType: ['album'], //从相册选择success: (res) => {var filesPaths = res.tempFilePaths; if(filesPaths && filesPaths.length > 0){this.img = filesPaths[0];console.log(this.img)} }});},}}
</script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.logo {height: 200rpx;width: 200rpx;margin-top: 200rpx;margin-left: auto;margin-right: auto;margin-bottom: 50rpx;}.text-area {display: flex;justify-content: center;}.title {font-size: 36rpx;color: #8f8f94;}
</style>
5、判断字符串是否包含关系：
if(imgs[i].indexOf('http') === -1)
6、匹配图片的正则表达式：
let data = res.resultValue.RichDatavar imgs = [];//匹配图片（g表示匹配所有结果i表示区分大小写）var imgReg = /<img.*?(?:>|\/>)/gi;//匹配src属性 var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;var arr = data.match(imgReg);console.log(arr)for (var i = 0; i < arr.length; i++) {var src = arr[i].match(srcReg);//获取图片地址if(src[1]){console.log('已匹配的图片地址'+(i+1)+'：'+src[1]);imgs.push(src[1]);} }console.log(imgs);7、替换的正则表达式
//替换style=""为空data = data.replace(/style=""/g,'')data = data.replace(/<img/g, '<img style="width: 100%;"').replace(/px/g, 'rpx').replace(/750/g, '350px')data = data.replace(/<p>/g, '<div style="text-align:center;">').replace(/<\/p>/g, '</div>')8、第三方布局https://orangleli.github.io/markdown-html/vue-js-markdown-editor/markdown2html.html
9、css布局
水平排列，两端对齐，居中
<view class="flex space-between v-center">
水平排列，居中
<view class="flex flex-row v-center">
垂直排列
<view class="flex flex-column">
1、上下居中（垂直居中）
style="height: 40px; background-color: #FFFFFF;
display: flex; flex-direction: row; align-items: center;"2、左右居中（水平居中）
style="height: 40px; background-color: #FFFFFF;
display: flex; flex-direction: row; justify-content: center;"10、JSON跟vue对象互换
对象转json
JSON.stringify(this.storeInfo)
json转对象
JSON.parse(options.data)
11、设置底部布局，且不受滑动干扰
.view_to_cart{position: fixed;right: 15rpx;bottom: 16%;width: 80rpx;height: 80rpx;line-height: 80rpx;text-align: center; margin-right: 10px;
}12、swiper动态计算高度
1、在布局设置高度为动态赋值<swiper class="tab-swiper" @change="switchTag" :current="nowActive" :style="'height: ' + height +'px;'"></swiper>2、在data声明height函数data() {return { height: 750, }},3、在页面挂载后设置swiper高度
mounted() {this.setHeight();},4、设置高度
setHeight() {let windowHeight = uni.getSystemInfoSync().windowHeight;//页面可见区域console.log("windowHeight = "+windowHeight)if (this.tabArr.length === 0){this.height = windowHeight;} else {windowHeight = windowHeight - 44;//页面可见区域 - 在线购物条高度 console.log("windowHeight = "+windowHeight)var query2 = uni.createSelectorQuery();query2.select('.view_head').boundingClientRect(rect => {if (rect) {console.log("view_head.height = "+rect.height)this.height = windowHeight - rect.height;//页面可见区域 - 头部高度console.log("this.height = "+this.height)}}).exec(); }},13、分页加载API
onReachBottom(){//分页加载console.log('onReachBottom'+this.nowActive)if(this.nowActive === 1){this.grouponPageNo++;this.getGrouponList(this.shopInfo.Id, this.message, this.userInfo.CommunityId, this.userInfo.userId);}else if(this.nowActive === 0){this.pageNo++;this.getGoodList(this.shopInfo.Id, this.message, this.userInfo.CommunityId, this.userInfo.userId);}},14、页面标签内写判断语句
:color="isStock==='1'?'#51B3F1':'#333'"
15、数组
1）循环
let arr=[]
for (let k in this.imgList) {
arr[k] = await this.uploadFile(this.imgList[k])
}
2）数组增加对象
arr.push()
16、页面返回刷新
var pages = getCurrentPages();
var currPage = pages[pages.length - 1]; //当前页面
var prevPage = pages[pages.length - 2]; //上一个页面
//直接调用上一个页面的setData()方法，把数据存到上一个页面中去
prevPage.setData({
isDoRefresh:true//上一个页面的data里面的参数
})
uni.navigateBack();
===========================
onShow:function(e){
let pages = getCurrentPages();
let currPage = pages[pages.length-1];
if (currPage.data.isDoRefresh == true){
currPage.data.isDoRefresh = false;
//在此刷新
}else{
//不用刷新
}
}
17、圆角
1. 指定背景颜色的元素圆角：
{border-radius: 25px;background: #8AC007;padding: 20px;width: 200px;height: 150px;
}2. 指定边框的元素圆角:
{border-radius: 25px;border: 2px solid #8AC007;padding: 20px;width: 200px;height: 150px;
}3. 指定背景图片的元素圆角:
{border-radius: 25px;background: url(paper.gif);background-position: left top;background-repeat: repeat;padding: 20px;width: 200px;height: 150px;
}4. 四个值,第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
{border-radius: 15px 50px 30px 5px;background: #8AC007;padding: 20px;width: 200px;height: 150px;
}border-radius:0 0 100% 100%;
18、渐变色
基础线性渐变，从上到下
background: linear-gradient(blue, pink);改变渐变方向
background: linear-gradient(to right, blue, pink);对角线渐变
background: linear-gradient(to bottom right, blue, pink);设置渐变角度
background: linear-gradient(70deg, blue, pink);19、padding
padding : +数值+单位 或 百分比数值div{padding:5px}设置对象距离四边边距为5px间隔同时可以单独设置左、右、上、下边距离发布设置1、padding-left 设置对象距离左边的边距补白间隔
div{padding-left:5px}
对象内距离左边补白间距为5px2、padding-right 设置对象距离右边的边距补白间隔
div{padding-right:5px}
对象内距离右边补白间距为5px3、padding-top 设置对象距离上边的边距补白间隔
div{padding-top:5px}
对象内距离上边补白间距为5px4、padding-bottom 设置对象距离下边的边距补白间隔
div{padding-bottom:5px}
对象内距离下边补白间距为5px检索或设置对象四边的补丁边距。如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。Padding的值不能为负值。这篇关于uni-app 手记集。的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
