提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
- 前言
- 一、uniapp是什么？
- 二、使用步骤
- 1.创建项目方式
- 2.学习代码
- login组建
- 总结
前言
提示：这里可以添加本文要记录的大概内容：
开发微信小程序部署到微信或者支付宝中
提示：以下是本篇文章正文内容，下面案例可供参考
一、uniapp是什么？
示例：uniapp是一款轻量开发框架
二、使用步骤
1.创建项目方式
代码如下（示例）：
2.学习代码
<style scoped>
swiper {
width: 100%;
height: 400rpx;
}
.swiper-img {
width: 100%;
height: 400rpx;
}
</style>
1.4 pages/index/index.vue代码如下：
<template>
<view class='index'>
<text selectable="true">我的方式</text>
<view>
<!-- 显示空格 -->
<view>
<text space="ensp">来了的</text>
</view>
</view>
<view class="icon-iconset0213">
<button size="mini" type="primary">小号按钮</button>
</view>
<view v-for="(item,i) in arr" :key="item.age" class="icon-gouwuche">
{{item.name}}
</view>
<view class="icon-gouwuche">
<button @click="tapHandle" type="primary">测试点击</button>
</view>
<view class="icon-gouwuche">
<button type="primary" @click="startPull">开启下拉刷新</button>
<view v-for="(item,i) in arr" :key="item.age" class="icon-gouwuche">
{{item.name}}
</view>
</view>
<!-- 存储方式 -->
<view class="icon-gouwuche">
<button size="mini" type="primary" @click="setStor">存储数据</button>
</view>
<!-- 从本地缓存中获取数据 -->
<view class="icon-gouwuche">
<button size="mini" type="primary" @click="getStorage">获取数据</button>
</view>
<!-- 指定移除当前key -->
<view class="icon-magnifier">
<button type="primary" @click="removeSrorage">删除数据</button>
</view>
<!-- 上传图片预览功能 -->
<view class="icon-shangjiantou">
<button @click="chooseImg" size="mini" type="primary">上传图片</button>
<image v-for="item in imageArr" :key="item" :src="item" mode=""></image>
</view>
<!-- 预览图片 -->
<view class="icon-gouwuche">
<view class="icon-iconset0213">
预览图片
</view>
<image v-for="(item,i) in imageArr" @click="previewImg(item)" :src="item" mode=""></image>
</view>
<!-- 页面跳转方式 -->
<!-- 第一种方式 -->
<view class="icon-gouwuche">
<navigator url="/pages/about/about" hover-class="navigator-hover">
<button type="primary" size="mini">跳转到关于页面</button>
</navigator>
</view>
<!-- 利编程方式进行跳转 -->
<!-- 第二钟方式 -->
<view class="icon-gouwuche">
<button type="primary" size="mini" @click="goAbout">跳转到about页面中</button>
</view>
<!-- 页面跳转 -->
<!-- 第三种方式 -->
<view class="icon-gouwuche">
<button type="warn" size="mini" @click="goMessage">跳转到about页面中</button>
</view>
<!-- 传递页面参数 -->
<view class="icon-gouwuche">
<button type="primary" size="mini" @click="goMessagePara">带参数到message</button>
</view>
<!-- 引入组建 -->
<!-- 父子组建传值问题 -->
<!-- 父组建接受子组建中的值 -->
<view class="icon-gouwuche">
<login :msg="msg" @myEvent="getMsg"></login>
</view>
</view>
</template>
<script>
//引入组建
import login from "@/components/login/login.vue"
// 引入组建
export default {
name: "index",
// 引入组建
components: {
login
},
// 声明组建
data() {
return {
// 传值方式
msg:'hello',
arr: [{
name: "张",
age: 123
}],
// 图片数据
imageArr: []
}
},
onLoad() {
},
methods: {
// 接受子组建的值
getMsg(res){
console.log(res);
},
// 带参数进行跳转到方式
goMessagePara() {
uni.navigateTo({
url: '/pages/message/message?id=80',
})
},
goMessage() {
uni.switchTab({
url: '/pages/message/message',
})
},
// 跳转到about页面中
goAbout() {
uni.navigateTo({
url: '/pages/about/about',
})
},
// 实现图片预览功能
previewImg(current) {
uni.previewImage({
urls: this.imageArr,
current,
success: function() {
console.log(current);
}
})
},
// 图片上出
chooseImg() {
uni.chooseImage({
count: 9,
success: res => {
//获取本地路径
this.imageArr = res.tempFilePaths
}
})
},
//删除数据
removeSrorage() {
uni.removeStorage({
key: 'id',
success: function() {
console.log("删除成功");
}
})
},
// 本地缓存中获取数据方式
getStorage() {
// 第一种方式
const id = uni.getStorageSync('id')
console.log("第一种获取方式", id);
//第二种方式
uni.getStorage({
key: 'id',
success: res => {
this.id = res.data
console.log("第二种方式", this.id);
}
})
},
setStor() {
uni.setStorage({
key: 'id',
data: 100,
success() {
console.log("存储成功");
}
})
},
tapHandle() {
console.log("我都方式");
},
startPull() {
uni.startPullDownRefresh();
}
},
onPullDownRefresh() {
this.arr = []
setTimeout(() => {
this.arr = ['前段', 'java']
uni.stopPullDownRefresh()
}, 1000);
}
}
</script>
<style scoped>
</style>login组建
<template>
<!-- login组件 -->
<view class="icon-gouwuche" style="color: aqua;">
这是一个组件 {{msg}}
<view class="icon-gouwuche" style="background-color: aqua;">
<button type="primary" size="mini" @click="sendMsg">给父组建传值</button>
</view>
</view>
</template>
<script>
export default {
// 父子组建传值方式
props: ['msg'],
data(){
return{
statu:"子组建"
}
},
methods: {
sendMsg() {
this.$emit('myEvent',this.statu)
}
}
}
</script>
<style>
</style>总结
提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，今天上面就是uniapp的创建环境和教程，这个只是最基础的创建方式如果想了解更加高深的需要不断学习进步方式