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, //默认9
sizeType: ['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.RichData
var 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}
对象内距离左边补白间距为5px
2、padding-right 设置对象距离右边的边距补白间隔
div{padding-right:5px}
对象内距离右边补白间距为5px
3、padding-top 设置对象距离上边的边距补白间隔
div{padding-top:5px}
对象内距离上边补白间距为5px
4、padding-bottom 设置对象距离下边的边距补白间隔
div{padding-bottom:5px}
对象内距离下边补白间距为5px
检索或设置对象四边的补丁边距。
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
如果只提供一个，将用于全部的四条边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
Padding的值不能为负值。
