Environment configuration
Official Website->Download->Unzip
https://www.jianshu.com/p/9dfa473f7fee:
div changed to view
span, font changed to text
a changed to navigator
img changed to image
input, but the type attribute changed to confirmtype
form, button, checkbox, radio , Label, textarea, canvas, video are still there.
select changed to picker
iframe changed to web-view
ul, li are gone, all use view instead of
audio, no longer recommended, changed to api method, background audio api document
in fact, old HTML tags can also be used in uni-app, uni -The app compiler will convert old tags to new tags when compiling. However, this usage is not recommended, it is easy to be confused when debugging the H5 end, and element-based selectors will also cause problems.
main.js: Receive method and mount it globally
Page jump
Tab jump
<template>
<view class="content">
<image class="logo" src="/static/hello.png"></image>
<view>导航</view>
<navigator url="/pages/index/logout">跳转至详情页</navigator>
</view>
</template>
Method jump
//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
url: '/pages/index/logout?id=1&name=uniapp'
});
Component library
You must log in to the plug-in market before use
Set up local storage
<template>
<view>
<view>
<text space="nbsp" style="font-size: 30px;">你好</text>
</view>
<button @click="setStorage">setStorage</button>
<button @click="getStorage">getStorage</button>
<view>
<text selectable="true">text不是块元素，view是块元素,selectable控制文本是否可选</text>
</view>
<button v-on:click="clickHandle(20,$event)">确定</button>
<view class="box-item" v-for="item in list">这是列表{
{
item}}</view>
</view>
</template>
<script>
export default{
data(){
return {
list:["aaa1","bbb2","ccc3","ddd","eee","fff"]
}
},
onLoad(options) {
console.log("页面加载了，并可以huo获得上一个页面的参数",options);
},
onPullDownRefresh() {
console.log("onPullDownRefresh下拉刷新");
this.list=["aaaqqqq1","bbb2","ccc3"];
uni.stopPullDownRefresh();
},
onReachBottom() {
console.log("滚动条触底");
//this.list.push()
this.list=[...this.list,...["111","222","333"]]
},
methods:{
clickHandle(num,e){
console.log("点击事件",num,e)
}
,
setStorage(){
uni.setStorage({
key:"id",
data:80,
success(){
console.log("存储成功");}
})
},
getStorage(){
uni.getStorage({
key:"id",
success(res){
console.log("获取成功",res);console.log("获取成功",res.data);}
})
}
}
}
</script>
<style>
.box-item{
height: 100px;line-height: 100px;}
</style>
get data request
<button @click="get">发送get获取数据</button>
get(){
uni.request({
//url:"http://localhost:8082/api/getlunbo",
//https://www.imooc.com/article/293281
//https://ask.csdn.net/questions/1092116
//http://www.kdniao.com/api-tracks
//下边是一些可以使用的api https://blog.csdn.net/c__chao/article/details/78573737
//url:"http://restapi.amap.com/v3/weather/weatherInfo",
url:"https://api.apiopen.top/videoHomeTab",
//url:"http://image.baidu.com/i?tn=baiduimagejson&width=&height=&word=girl&rn=10&pn=2",
success(res){
console.log(res);console.log(res.data);
console.log(res.data.result);
console.log(res.data.result[0].name);
}
})
},
css control
<view class="box1" hover-class="box1after">
</view>
<style>
.box1{
width: 100px;height: 100px;background-color: blue;}
.box1after{
width: 100px;height: 100px;background-color: #4CD964;}
</style>
Positioning
Access Request:
uni.getLocation({
type: 'wgs84 ',
success: function (res) {
console.log('经度：' + res.longitude);
console.log('纬度：' + res.latitude);
}
});
Please update if it doesn't work properly
Judgment
let theNode=uni.createSelectorQuery().select(".uni-title")//选择类
theNode.boundingClientRect((data)=>{
console.log(data)
}).exec()