uni-app—从安装到卸载（转）

贵在持久 發表於 2019-6-8 20:02:00

<h1 class="postTitle">uni-app—从安装到卸载</h1>
<div class="clear"> </div>
<div class="postBody">
<div id="cnblogs_post_body" class="blogpost-body">
 
 
uni-app实现了一套代码，同时运行到多个平台。支持iOS模拟器、Android模拟器、H5、微信开发者工具、支付宝小程序Studio、百度开发者工具、字节跳动开发者工具
<img src="https://img2018.cnblogs.com/blog/1412010/201903/1412010-20190307132327001-213756040.png" alt="">
 
工具安装
开发uni-app需要安装HBuilder X.下载地址。<img src="https://img2018.cnblogs.com/blog/1412010/201903/1412010-20190307132435888-1392093562.png" alt="">
 
下载成功后直接解压即可
 <img src="https://img2018.cnblogs.com/blog/1412010/201903/1412010-20190307132810032-1469178924.png" alt="">
简单的配置一下开发偏好：
<img src="https://img2018.cnblogs.com/blog/1412010/201903/1412010-20190307132929460-1941258458.png" alt="">
 
 创建第一个uni-app
点击左上角【文件】>>【新建】>>【项目】，选择uni-app模板。
<img src="https://img2018.cnblogs.com/blog/1412010/201903/1412010-20190307133417268-2066409206.png" alt="">
 
uni-app目录结构
<img src="https://img2018.cnblogs.com/blog/1412010/201903/1412010-20190307134013876-188390032.png" alt="">
 
目录结构基本和小程序的目录结构相似，只是多了个基础组件的文件夹；
uni-app有自己的插件库，直接点击安装即可，而且，它也支持npm包管理，点击【工具】>> 【插件安装】即可配置
 
<img src="https://img2018.cnblogs.com/blog/1412010/201903/1412010-20190320115522036-1601620891.png" alt="">
 
 
 
好了，基本的安装工作就是这么多，下面我们看一下如何调试
 
调试
浏览器
uni-app支持多个端同时调试，这也是它最便捷的地方，首先看一下浏览器端的调试：
调试之前我们首先要配置一下你的浏览器的安装路径，默认HBuilder是检测不到的
点击【运行】>>【运行到浏览器】>> 【配置web服务器】
<img src="https://img2018.cnblogs.com/blog/1412010/201903/1412010-20190317164503103-1918420145.png" alt="">
 
把浏览器的安装路径粘贴在里边即可
然后就能够调试了
<img src="https://img2018.cnblogs.com/blog/1412010/201903/1412010-20190317164158067-1880221665.png" alt="">
 
 然后我们看一下真机
 
 
手机调试
以安卓手机为例，需要开启开发者模式才能进行调试，方法如下：
打开【设置】>> 【关于本机】，找到【软件版本】，连续点击五次，即可开启开发者选项
<img src="https://img2018.cnblogs.com/blog/1412010/201903/1412010-20190320113740338-1173208596.png" alt="">
 
开发者选项的开启和关闭在【设置】 >> 【高级设置】>> 【开发者选项】，如下：
<img src="https://img2018.cnblogs.com/blog/1412010/201903/1412010-20190320113920252-1963454477.png" alt="">
进入打开【USB调试】，插上数据线连接手机，然后就能真机调试了。中途可能要进行一次授权，点击确认即可，授权成功后你的手机上会安装一个HBuilder app，你之后再开发环境中做的所有效果都会渲染到这个app中
 
<img src="https://img2018.cnblogs.com/blog/1412010/201903/1412010-20190320114112562-763622699.png" alt="">
 
点击，选择自己的手机即可调试
<img src="https://img2018.cnblogs.com/blog/1412010/201903/1412010-20190320114508758-1210116307.png" alt="">
 
iphone手机更加简单，连接手机后直接运行，他会报错，然后在手机设置一下就行了，步骤如下：
【设置】>> 【通用】>> 【设备管理】,信任一下HBuilder即可。
 
小程序调试：
点击【运行】 >> 【运行到小程序模拟器】>> 【运行设置】
<img src="https://img2018.cnblogs.com/blog/1412010/201903/1412010-20190320114551699-762922019.png" alt="">
 
打开后把微信开发者工具的安装路径粘贴多对应的地址栏即可
 <img src="https://img2018.cnblogs.com/blog/1412010/201903/1412010-20190320114734206-1111016709.png" alt="">
 
需要注意两点： 1）微信开发者工具必须是官方最新版。 2）微信开发者工具需要授权，方法如下：
打开微信开发者工具，点击设置图标
 
<img src="https://img2018.cnblogs.com/blog/1412010/201903/1412010-20190320114947161-59184337.png" alt="">
选择【安全】，服务端口选择开启
<img src="https://img2018.cnblogs.com/blog/1412010/201903/1412010-20190320115006280-1082150682.png" alt="">
 
然后即可进行微信小程序调试
<img src="https://img2018.cnblogs.com/blog/1412010/201903/1412010-20190320115119825-46251091.png" alt="">
*百度，支付宝，字节跳动小程序步骤和微信类似
 
 
uni-app项目实战
我做了一个简单的demo，项目结构如下：
 
<img src="https://img2018.cnblogs.com/blog/1412010/201903/1412010-20190320142329969-286489152.png" alt="">
 
我把每个不同的功能分了不同的文件夹，相当于不同的层（每个文件夹里可以根据业务在进行细分）,请求工具我用的uni-app官方的api（uni.request），在此基础上我进行了简单的二次封装，代码如下：
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"><img src="https://common.cnblogs.com/images/copycode.gif" alt="复制代码"></div>
<pre>// uni-app请求封装

export default class Request {
http (router,data={},method) {
 // 基础地址
 let path = 'http://mock.allhome.com.cn/mock/5c91b03a2add03001024c420/uni';
 // 返回promise
 return new Promise((resolve,reject) => {
 // 请求
 uni.request({
 url: `${path}${router}`,
 data: data,
 method:method,
 success: (res) => {
 // 将结果抛出
 resolve(res.data)
 }
 })
 })
}
}</pre>
<div class="cnblogs_code_toolbar"><img src="https://common.cnblogs.com/images/copycode.gif" alt="复制代码"></div>
</div>
这个类接受三个参数，第一个是后端的路由地址，第二个是需要给后端传的实体，第三个是请求方法，该类返回一个Promise，请求成功后将结果抛出，最后在api.js文件中引用并实例化，代码如下：
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"><img src="https://common.cnblogs.com/images/copycode.gif" alt="复制代码"></div>
<pre>import Request from '../static/js/request.js';
let request = new Request().http

export default {
getJobList: function () {
 return request('/jobList',{},'GET')
}
}</pre>
<div class="cnblogs_code_toolbar"><img src="https://common.cnblogs.com/images/copycode.gif" alt="复制代码"></div>
</div>
然后就可以在组件里取结果了，代码如下：
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"><img src="https://common.cnblogs.com/images/copycode.gif" alt="复制代码"></div>
<pre>import api from '../../api/api.js';

export default {
 data() {
 return {
 listArr: []
 }
 },
 onLoad() {
 // 请求职位列表
 api.getJobList().then(res => {
 this.listArr = res.data
 })
 }
}</pre>
<div class="cnblogs_code_toolbar"><img src="https://common.cnblogs.com/images/copycode.gif" alt="复制代码"></div>
</div>
 
 好了，基本的情况就是这么多，最后是调试结果：
<img src="https://img2018.cnblogs.com/blog/1412010/201903/1412010-20190320143147192-1035641006.png" alt="">
 
 
该项目代码我已经上传到了gitlab上：gitlab项目地址 
 
好了，基本的安装和配置过程就这么多了，接下来的几个月我会继续踩坑，期待我后面的博客吧！
</div>
</div> 
来源：https://www.cnblogs.com/LiZhongZhongY/p/10991535.html

頁: [1]

琼殿技术论坛's Archiver

uni-app—从安装到卸载（转）