前言
在练习uniapp项目的过程中总会遇到问题，我把我在学习的过程中遇到的一些困难和解决办法以及关于学习uniapp的一些心得体会也发在这篇博文里面(本人使用HBuilderX来做为开发工具)
uniapp官网
https://uniapp.dcloud.net.cn/resource.html#
HBuilderX官网https://www.dcloud.io/
目录
打开HBuilderX，然后鼠标划到项目上（HBuilderX）编辑
然后是一个这样的页面，输入项目名称，选择vue版本，点击创建就创建好了
uni.setStorage('key', 'value')
1.uniapp学习的一些心得体会：
- uniapp是基于vue.js而开发出来的一个微信小程序框架，它可以运行在多个系统中，例如Android，ios等等，所以想学好uniapp那必须的先去了解Vue.js
- 了解一下uniapp的生命周期，这样可以帮你更好的理解应用程序的状态
- uniapp丰富的生态系统，uniapp的插件市场拥有数千款插件，可以下载合适的插件来帮助自己更加快速的构建应用程序
- 学习完基础知识后就应该进行实践和练习，唯有实践操作才能帮助你更快的掌握这项技能
- 选择一项适合自己的开发工具，例如如HBuilderX，VSCode等。
2.如何创建一个项目
-
打开HBuilderX，然后鼠标划到项目上（HBuilderX）
-
然后是一个这样的页面，输入项目名称，选择vue版本，点击创建就创建好了
3. uniapp中标签的使用：
代码展示
uniapp中有许许多多的标签例如下面的<template>，<view>，<text>，<script>，<style>等等，我来介绍下这些标签都有哪些作用（这里用的是模仿音乐播放器写的代码）
<template>
<view class="content">
<uamhead :title="title"></uamhead>
<view class="head">
<img :src="playlist.coverImgUrl" alt="" class="img1">
<text class="headtext1">{{playlist.playCount}}</text>
<img src="../../static/播放.png" alt="" class="imgbf">
</view>
<text class="headtext2">
{{playlist.name}}
{{playlist.description}}
</text>
<text class="bofang">播放全部(共{{playlist.trackCount}}首)
<img src="../../static/播放.png" alt="" class="bofangtp">
</text>
<view class="gedan" v-for="(item,index) in playlist.tracks">
<text class="gedan-text">
{{index+1}}
</text>
<text class="gequ" @tap="ListToplayer(item.id)">
<p>{{item.name}}</p>
<!-- 歌曲名字 -->
<p class="gequ-p">
<img v-if="privileges[index].maxbr == 999000" src="../../static/sq.png" alt="">
<img v-if="privileges[index].flag > 60 && privileges[index].flag < 70" src="../../static/dujia.png"
alt="">
{{item.ar[0].name}}
</p>
<!-- 作者 -->
</text><img src="../../static/播放.png" alt="" class="gequbf">
</view></view>
</template>
<script>
import uamhead from '../../components/uamhead/uamhead.vue'
import {
list
} from '../../common/api';
export default {
data() {
return {
title: "榜单列表",
playlist: [],
privileges: [],}
},
onLoad(options) {let listId = options.id;
list(listId).then((res) => {
this.title = res.data.playlist.name;
this.playlist = res.data.playlist;
this.privileges = res.data.privileges;
console.log(res.data.playlist)});
},
methods: {
ListToplayer(id){
uni.navigateTo({
url:'/pages/player/player?songId=' + id
})
},
}
}
</script><style>
.content {}.head {}
.head .imgbf {
position: relative;
bottom: 157px;
right: 215px;
width: 20px;
height: 20px;
opacity: 0.4;
border-radius: 15rpx;
}.headtext1 {
position: relative;
bottom: 160px;
right: 100px;
color: aliceblue;
}.gequ p img {
width: 30rpx;
height: 21rpx;
}.headtext2 {
white-space: pre-line;
display: flex;
position: relative;
bottom: 185px;
left: 230px;
width: 300px;
color: darkgrey;
}.head .img1 {
position: relative;
top: 20px;
width: 200px;
height: 200px;
border-radius: 15rpx;
}.gedan {
display: flex;
margin-bottom: 15px;
margin-left: 35rpx;
align-items: center;
}.gedan-text {
position: absolute;
left: 0rpx;
margin-right: 15rpx;
color: darkgrey;
}.bofang {
position: relative;
bottom: 20px;
left: 20px;
}.gequ {
position: relative;
left: 15px;
}.bofangtp {
width: 20px;
height: 20px;
position: relative;
top: 5px;
right: 155px;
}
.gequbf {
width: 20rpx;
height: 20rpx;
/* float: right; */
position: absolute;
right: 50rpx;
}
</style>
效果截图
| 属性 | 描述 | 默认值 |
| color | color 属性是一种 CSS 属性，用于设置文本的颜色。 | 默认颜色通常是黑(#000000) |
| template | 它不会在页面中做任何渲染，只接受控制属性 | |
| view | 相当于HTML中的div标签 | |
| text | 用于展示文本内容 | |
| script | 可以用来写JavaScrip | |
| style | 一般用来写css样式 | |
| image | 用于展示图片 | 默认使用图片原始尺寸 |
这些都只是一些常用的的标签，还有一些其他的标签例如button，input，audio，video等等
4.uniapp中的那些几种常见的页面跳转代码以及作用（uni.navigateTo，uni.redirectTo....）
1.uni.navigateTo()作用
作用：保留当前页面，跳转相应的页面，使用
uni.navigateBack可以返回到上一个页面。
ListToplayer(id){
uni.navigateTo({
url:'/pages/player/player?songId=' + id
})
},2.uni.redirectTo()作用
作用：关闭当前页面，跳转到相应的页面 (文中....省略内容)
uni.redirectTo({
url: '.....'
});3.uni.reLaunch()作用
作用：关闭所有页面，打开到引用内的某个页面
uni.reLaunch({
url:'/pages/player/player'
})4.uni.navigateBack()作用
作用：返回上一层页面
uni.navigateBack();5.项目目录以及其文件作用
创建完项目后一般会自动创建一下几个目录，我来给大家介绍下它们的作用
- pages:一般用于存放页面。
- static:用于存放静态页面，一般是图片。
- App.vue:是vue页面资源的第一个加载项目，所有的页面都是在这个里面切换的。
- index.html:首页入口文件。
- main.js:项目入口文件，主要作用是初始化
vue实例并使用需要的插件。- manifest.json:用于写应用名称，应用描述，版本号，权限等等。
- pages.json:用来写页面文件的路径和导航栏标题文本，导航栏标题背景颜色，导航栏标题背景颜色等等。
- uni.scss:方便整体控制应用样式，里面有许多颜色样式，和图片尺寸。
6.uniapp的生命周期
- onLaunch：应用启动时触发，全局只触发一次
- onShow：应用启动或从后台切换到前台时触发
- onHide：应用从前台切换到后台时触发
- onError：应用发生脚本错误时触发
- onPageNotFound：应用页面找不到时触发
- onUniNViewMessage：监听原生组件发送的消息
- onPullDownRefresh：页面下拉刷新时触发
- onReachBottom：页面滚动到底部时触发
- onShareAppMessage：右上角分享按钮点击时触发
- onTabItemTap：tabBar 点击时触发
- onNavigationBarButtonTap：导航栏按钮点击时触发
- onResize：页面尺寸变化时触发
这些生命周期函数可以在页面级别和组件级别各自存在，执行时机略有不同。在页面级别的生命周期函数中，可以访问到页面的数据和方法。在组件级别的生命周期函数中，则可以访问到组件的 props 和 data。
注意事项：生命周期函数只能在应用和页面级别使用，组件级别没有生命周期函数。在使用生命周期函数时，需要在对应页面或应用的 js 文件中进行定义。
7.本地缓存介绍
uni.getStorage('key')
作用：从本地缓存中获取数据。
uni.setStorage('key', 'value')
作用：存储数据到本地缓存。
注意：
使用数据缓存时，为key命名时应该避免使用uni为前缀的名字。
8.如何把代码上传到Gitee.com
- git的下载(Git - Downloads (git-scm.com))
可以选择下载适合自己的版本，安装完成后，打开终端或命令行窗口，输入git --version命令，确认安装成功
- 建立仓库
新建一个文件夹，作为git仓库
- 设置克隆仓库
右键选中Git Bash Here
然后会出现这样一个窗口输入git clone （输入你的码云克隆地址）（Gitee）然后你的仓库就算是创建好了
- 如何上传代码
这是初始化完成后的文件夹，我们只需要把文件拖到这里然后右击鼠标选中Git GUI Here
然后会出现这个窗口，文件一般会出现在框框内，然后按照红色箭头一 一点击，点到Sign Off 的时候会让你填写提交信息，然后点击Commit (Commit 是将本地修改提交到本地仓库的操作),最后点击push上传，一般会有成功提示，到这里代码就上传完成了。
也可通过pull操作从远端拉取代码到本地仓库
9.学习uniapp期间可能遇到的错误以及一些解决方法
1.例如下面这段代码，我经常会忘记在url后面加上``或者是写错符号写成‘’，然后导致项目运行后出现问题
解决方法:最主要的还是要细心的阅读代码，检查是否有写错、漏写、中英文标点符号输入错误
import { newsUrl } from "./confignew.js"
export function channel1(){
return uni.request({
url:`${newsUrl}/news/channel`,
method:'GET'
})
}10.总结
uniapp是一框强大的框架，在学习的过程中受到了很多的启发，希望我这篇文章能对一些有需要的人获得帮助，在此我也给大家分享一些在学习中受到的启发，学习uniapp需要多多练习，通过多次的练习来不断提高自己的技术水平，在学习的过程中也要多思考问题，找到适合自己的学习方式，来帮助自己更加高效的学习
扫一扫
641
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
