uni-app学习总结

本文以B站黑马教程的uni-app项目实战视频为载体，总结uni-app相关用法，如有误，请指出~

一、创建项目：

HbuilderX工具-->文件-->新建-->项目---》选择uni--app项目，创建。

二、项目初始化：

去掉一些无用的代码

三、创建底部的tabBar

使用iconfont图标的注意事项：

1、在iconfont官网下载图标，然后在static文件夹下新建iconfont文件夹，分别放以下内容的文件。

2、修改iconfont.css文件中字体的引入路径：

3、在App.vue文件中引入：

如果希望在tabbar中使用iconfont可以这样用：

四、发送请求

uni.request({....}

//获取轮播图
getSwippers(){uni.request({url:'https://localhost:8082/api/getlunbo',success:(res)=>{if(res.data.status!==0){return uni.showToast({title:'获取数据失败'})this.swippers=res.data.message}}
})
}

以上的请求未做二次封装，如果需要设置Token等，还要一一设置，不利于全局维护，因此封装request就尤其必要。

在src下创建utils文件夹，新建request.js文件

const BASE_URL = 'https://localhost:8082'
export const myRequest = (options) => {return new Promise((resolve, reject) => {uni.request({url: `${BASE_URL}${options.url}`,method: options.method || 'GET',success: (res) => {if (res.data.status !== 0) {uni.showToast({title: '获取数据失败'})resolve(res)}},fail: (err) => {uni.showToast({title: '请求数据失败'})reject(err)}})})
}

五、小程序发布

这个我在测试的时候踩了坑，特别要注意！！！

小程序发布需要有AppId，这个里的AppId是指小程序的AppId，不是公众号的，否则运行的时候，始终是无法启动微信开发者工具！！

一、获取小程序AppID的方法：

1、登录微信公众平台小程序，注册小程序。

2、注册好后，登录进入，在左侧的开发页面，有个开发管理，然后找到开发设置，就可以看到如下的一串appId。

3、在HbuilderX工具，点击项目的manifest.json文件，小程序配置，输入小程序AppId。

4、点击“发行‘，在弹出框中输入appId，然后就会自启动微信开发者工具了

5、在微信开发这工具中，点击上传，然后就可以在小程序平台看到我们上传的小程序了（体验版）

六、H5发布

1、在HbuilderX工具，点击项目的manifest.json文件，web配置，设置页面标题、路由模式等

2、点击发行，然后输入网页标题，然后就会自动打包成H5网页文件

3、点击index.html文件，就可以看到啦！

七、安卓打包

1、在HbuilderX工具，点击项目的manifest.json文件，完成基础的配置，如应用图标，启动图设置等，权限配置之类的..

2、点击发行，原生App-云打包，然后，使用云端证书，点击打包。

3、等待打包，然后就可以在项目的/unpackage/release/apk文件夹下看到被打包的apk安装文件，然后用手机安装即可。

总结：整体的来说，uni-app的开发其实和vue开发差不多的，掌握了vue，上手起来还是挺快的，发布运行也比较简单，实现了一套代码，多端部署，还是很方便实用的！