uniapp开发微信小程序

走音米霸 發表於 2021-7-12 10:47:00

uni-app介绍（官网）
<code>uni-app</code>是一个使用<code>Vue.js</code> 开发所有前端应用的框架，开发者编写一套代码，可发布到<code>iOS</code>、<code>Android</code>、<code>H5</code>、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。
即使不跨端，<code>uni-app</code>同时也是更好的小程序开发框架。
开发工具（HBuilderX）
HBuilderX 官方下载网址：https://www.dcloud.io/hbuilderx.html
 
HBuilderX 提供了一些插件，可直接下载安装，具体如下图：工具  >  插件安装
<img src="https://img2020.cnblogs.com/blog/2383272/202107/2383272-20210712095841488-1607539291.jpg">
项目结构
首先我们通过 HBuilderx > 文件 > 项目，选择 uni-app项目，模板我选择的是默认模板，当然你也可以选择其他模板，接着确认创建，如果你选择的是默认模板，此时你的文件夹应该如下图：
<img src="https://img2020.cnblogs.com/blog/2383272/202107/2383272-20210712100257206-102478099.png">
接着我根据自己的项目需求，以及为了与<code>vue</code>的<code>pc</code>项目结构保持一下，分别添加如下文件夹：
<img src="https://img2020.cnblogs.com/blog/2383272/202107/2383272-20210712100405954-1972986726.jpg">
<img src="https://img2020.cnblogs.com/blog/2383272/202107/2383272-20210712100513150-68138471.png">
主要文件介绍：
<ul>
<li><code>api</code> 文件夹中存放的是各个页面的请求路径，引入<code>request.service.js</code>暴露出来的<code>api</code>，</li>
<li><code>colorui</code> 使用了<code>color-ui</code>样式，个人认为样式非常好看，非常感谢！</li>
<li><code>common</code> 存放全局通用的js方法</li>
<li><code>components</code> 存放全局组件，包括<code>uni-ui</code>以及自己封装的组件</li>
<li><code>pages</code> 主要页面，其中<code>pages</code>文件夹中 <code>index</code>文件中可布局底部的<code>tab</code>页面，通过<code>v-if</code>判断显示不同的tab页</li>
<li><code>services</code> 通用的服务文件（我不知道这种描述是否准确，原来用的<code>Angular4</code>，<code>Angular</code>中服务概念对我有一定的影响）<code>static</code> 静态文件，我主要用来放图片
<ul>
<li><code>auth.service.js</code> 通过使用<code>uni.setStorageSync</code>简单封装了一些保存用户的<code>token</code>方法</li>
<li><code>config.service.js</code> 保存全局的变量例如：<code>apiUrl</code>请求接口的<code>IP</code>, <code>storage_key</code> 是<code>token</code> 的键值，全局引用的变量都可定义在这个文件内，后期如果需要改动，只需要修改这个文件中对用的值</li>
<li><code>request.service.js</code> 使用<code>Promise</code>对<code>uni.request</code>进行封装，将<code>get</code>、<code>post</code>、<code>delete</code>请求方式暴露出来，在<code>api</code>文件夹中引用这个文件即可使用<code>get</code>、<code>post</code>、<code>delete</code>方法</li>
</ul>
</li>
<li></li>
<li><code>unpackage</code> (在小程序模拟器运行的文件)</li>
<li><code>App</code> 应用配置，用来配置App全局样式以及监听</li>
</ul>
如何自定义底部tab导航栏
本人项目中需要根据不同的角色显示不同的地图tab页，那么原来在pages.json设置的tab页，不够灵活，也不好扩展，因此自定义tab页，具体如下：
1）在pages文件夹中，新建一个index文件夹并创建一个index.vue页面，在这个页面可布局底部tab，根据点击不同的tab显示对应的tab页，如图：
<img src="https://img2020.cnblogs.com/blog/2383272/202107/2383272-20210712101219659-491511515.jpg">
注意：
2）如果每个tab点击是切换不同的view，这个就相当于首页应用了，当页面比较复杂时，切换过程存在卡顿。所以使用自定义的tabbar就尽量避免太多复杂的页面。
3）当然原生tabbar虽然体验好，但自定义性不足，这个需要开发者根据字节的需求来平衡选择。
如何使用colorui
ColorUI是一个css库！在你引入样式后根据class来调用组件
1）下载源码解压获得/Colorui-UniApp文件夹，复制目录下的/colorui文件夹到你的项目根目录
2）App.vue引入关键css、main.css、icon.css
<style> 
　　@import "colorui/main.css"; 
　　@import "colorui/icon.css"; 
　　@import "app.css"; /* 你的项目css */
 　　.... 
</style>
此时你可以使用colorUI提供的css样式了，
因为colorUI的文档说明正在完善中，具体样式对应的类名可能不清楚，那么你可将color-ui下载下来，使用<code>HBuilderX</code>运行在浏览器中，打开调试工具，找到对应的节点即可获取对应的类名，（当然你也可能会有其他好的方法）。
<h3 id="使用colorui自定义导航栏">使用colorui自定义导航栏</h3>
<ul>
<li><code>pages.json</code> 配置取消系统导航栏</li>
</ul>
<div class="cnblogs_code">
<pre>"globalStyle": {
"navigationStyle": "custom"
},</pre>
</div>
<ul>
<li><code>App.vue</code> 获得系统信息</li>
</ul>
<div class="cnblogs_code">
<pre>onLaunch: function() {
uni.getSystemInfo({
 success: function(e) {
 // #ifndef MP
 Vue.prototype.StatusBar = e.statusBarHeight;
 if (e.platform == 'android') {
 Vue.prototype.CustomBar = e.statusBarHeight + 50;
 } else {
 Vue.prototype.CustomBar = e.statusBarHeight + 45;
 };
 // #endif
 // #ifdef MP-WEIXIN (微信小程序)
 Vue.prototype.StatusBar = e.statusBarHeight;
 let custom = wx.getMenuButtonBoundingClientRect();
 Vue.prototype.Custom = custom;
 Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
 // #endif
 // #ifdef MP-ALIPAY
 Vue.prototype.StatusBar = e.statusBarHeight;
 Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
 // #endif
 }
})
},</pre>
</div>
<ul>
<li>在<code>main.js</code>引入<code>cu-custom</code>组件</li>
</ul>
<div class="cnblogs_code">
<pre>import cuCustom from './colorui/components/cu-custom.vue'
Vue.component('cu-custom',cuCustom)</pre>
</div>
<ul>
<li>在需要的页面可以直接使用了，如下：</li>
</ul>
<div class="cnblogs_code">
<pre><cu-custom bgColor="bg-gradual-blue" :isBack="true">
<block slot="backText">返回</block>
<block slot="content">导航栏</block>
</cu-custom></pre>
</div>
<h2 id="跨端兼容（如何你只是开发小程序，就不需要考虑）">跨端兼容（如何你只是开发小程序，就不需要考虑）</h2>
根据平台特性，<code>uni-app</code> 提供了条件编译手段，在一个工程里优雅的完成了平台个性化实现。
<div class="cnblogs_code">
<pre><view class="content">
<! -- #ifdef APP-PLUS -->
<view>仅出现在 5+App 平台下的代码</view>
<! -- #endif -->

<! -- #ifndef H5 -->
<view>除了 H5 平台，其它平台均存在的代码</view>
<! -- #endif -->

<! -- #ifdef H5 || MP-WEIXIN -->
<view>仅在 H5 平台或微信小程序平台存在的代码</view>
<! -- #endif -->
</view></pre>
</div>
<h2 id="发布微信小程序">发布微信小程序</h2>
<ul>
<li>
服务器域名必须是<code>https</code>合法域名
</li>
<li>
进入开发页面 <code>开发</code> > <code>开发设置</code>，设置服务器域名, 如图
</li>
</ul>
服务器域名
<img src="https://img2020.cnblogs.com/blog/2383272/202107/2383272-20210712104216524-1516509183.jpg">
<ul>
<li>
发布小程序之前需要配置<code>appid</code>,应用名称、logo,可登录微信公众平台进入设置页，设置小程序的基本信息
</li>
<li>
使用<code>HBuilderx</code>找到<code>发行</code> > <code>小程序-微信</code>，点击后稍等片刻会启动微信开发工具，点击微信开发工具<code>上传</code>，填写上传信息即可，此时上传到微信公共平台是体验版，需要在<code>版本管理</code>><code>提交审核</code>，等待后台审核，审核完成后，小程序也就上线成功了,如图：
</li>
</ul>
<img src="https://img2020.cnblogs.com/blog/2383272/202107/2383272-20210712104251566-595721178.jpg">
<h2 id="总结">总结</h2>
本文主要介绍了使用uni-app框架开发微信小程序，自己对默认模板的补充，包括封装<code>request</code>接口，引用<code>color-ui</code>,动态设置底部<code>tab</code>页，还有通过<code>color-ui</code>提供的导航栏组件，自定义导航栏。本人才疏学浅，表达能力有限，书写过程如有错误欢迎指正，也请点赞评论鼓励（ps: 内心怕怕的）
关于<code>uni-app</code>更多信息可参考官方文档 https://uniapp.dcloud.io
  
来源：https://www.cnblogs.com/anna001/p/15001067.html

頁: [1]

琼殿技术论坛's Archiver

uniapp开发微信小程序