刘山峰 發表於 2019-11-7 09:40:00

使用uni-app开发微信小程序

<p><img src="https://img2018.cnblogs.com/blog/1347137/201911/1347137-20191107093440746-666986609.png" alt="" loading="lazy"></p>
<h1 id="uni-app-开发微信小程序">uni-app 开发微信小程序</h1>
<p>详见个人博客：https://shengchangwei.github.io/js-uni-app/ (github.io首次加载较慢)</p>
<h2 id="前言">前言</h2>
<p>9月份，开始开发微信小程序，也曾调研过<code>wepy</code>/<code>mpvue</code>，考虑到后期跨端的需求，最终选择使用了<code>uni-app</code>，本文主要介绍如何使用<code>uni-app</code>搭建小程序项目，以及自己对框架的补充，包括封装<code>request</code>接口，引用<code>color-ui</code>,动态设置底部<code>tab</code>页等，详情见下文</p>
<h2 id="uni-app-介绍官网">uni-app 介绍（官网）</h2>
<p><code>uni-app </code>是一个使用<code> Vue.js</code> 开发所有前端应用的框架，开发者编写一套代码，可发布到<code>iOS</code>、<code>Android</code>、<code>H5</code>、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。</p>
<p>即使不跨端，<code>uni-app</code>同时也是更好的小程序开发框架。详见评测</p>
<p>好处如图：</p>
<p><img src="https://img2018.cnblogs.com/blog/1347137/201911/1347137-20191107093546261-297110363.jpg" alt="" loading="lazy"></p>
<p>我使用<code>uni-app</code>框架主要用来开发微信小程序，我使用过程中感觉的好处是：</p>
<ul>
<li><code>uni-app</code>框架使用的开发工具 <code>HBuilderX </code>，<code>HBuilderX</code> 内置相关环境，开箱即用，无需配置<code> nodejs</code>， 需要什么插件可直接下载，测试、打包、发布特别方便。</li>
<li><code>uni-app </code>采用<code>Vue.js</code>语法，基本支持<code>vue</code>大部分语法（<code>vue</code>的动态组件<code>component</code>不支持）。</li>
<li><code>PC</code>端使用<code>vue</code>封装的一些<code>js</code>方法，以及建构思想，可直接移植到<code>uni-app</code>中，比如：本人<code>pc </code>项目中<code>api</code>接口<code>js</code>文件，可直接复制到小程序框架<code>api</code>文件夹中（PS：<code>api</code>文件夹维护后端请求路径）</li>
<li><code>uni-app</code> 周边生态丰富，插件市场可用的组件特别多，也可使用vue语法自己封装一些组件。</li>
</ul>
<h2 id="开发工具hbuilderx">开发工具（HBuilderX）</h2>
<ul>
<li><code>HBuilderX</code>: 官网IDE下载地址;</li>
<li><code>HBuilderX</code>是通用的前端开发工具，但为<code>uni-app</code>做了特别强化。</li>
<li><code>HBuilderX</code>提供了一些插件，可直接下载安装，具体如下图： <code>工具</code> &gt; <code>插件安装</code></li>
</ul>
<p><img src="https://img2018.cnblogs.com/blog/1347137/201911/1347137-20191107093558923-1259554353.jpg" alt="" loading="lazy"></p>
<h2 id="项目结构">项目结构</h2>
<p>首先我们通过<code>HBuilderx</code> &gt; <code>文件</code> &gt; <code>项目</code>，选择<code>uni-app</code>项目，模板我选择的是默认模板，当然你也可选择其他模板，接着确认创建，如果你选择的是默认模板，此时你的文件夹应该如下图：</p>
<p><img src="https://img2018.cnblogs.com/blog/1347137/201911/1347137-20191107093616984-408191008.jpg" alt="" loading="lazy"></p>
<p>接着我根据自己的项目需求，以及为了与<code>vue</code>的<code>pc</code>项目结构保持一下，分别添加如下文件夹</p>
<p>具体代码可参考GitHub:weixin-start</p>
<p><img src="https://img2018.cnblogs.com/blog/1347137/201911/1347137-20191107093635138-2060740649.jpg" alt="" loading="lazy"></p>
<pre><code class="language-shell">+-- api -- (页面接口路径)
|   +-- login.js
|   +-- tools.js
+-- colorui -- (color-ui 样式)
+-- common -- (通用的js方法)
+-- components -- (通用的组件)
+-- pages -- (主要页面)
+-- services -- (通用的服务)
|   +-- auth.service.js -- (主要封装了一些保存用户的token方法)
|   +-- config.service.js -- (存放全局通用的变量)
|   +-- request.service.js -- (封装了uni.request的方法)
+-- static -- (静态文件)
+-- unpackage -- (在小程序模拟器运行的文件)
+-- App.vue -- (应用配置，用来配置App全局样式以及监听 )
+-- main.js -- ( Vue初始化入口文件)
+-- manifest.json -- (配置应用名称、appid、logo、版本等打包信息)
+-- pages.json -- (配置页面路由、导航条、选项卡等页面类信息)
+-- uni.scss -- (这里是uni-app内置的常用样式变量)
</code></pre>
<p>主要文件介绍：</p>
<ul>
<li><code>api</code> 文件夹中存放的是各个页面的请求路径，引入<code>request.service.js</code>暴露出来的<code>api</code>，</li>
<li><code>colorui</code> 使用了<code>color-ui</code>样式，个人认为样式非常好看，非常感谢，详情：color-ui</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>中服务概念对我有一定的影响）
<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><code>static</code> 静态文件，我主要用来放图片</li>
<li><code>unpackage</code> (在小程序模拟器运行的文件)</li>
<li><code>App</code> 应用配置，用来配置App全局样式以及监听</li>
</ul>
<h2 id="如何自定义底部tab导航栏">如何自定义底部tab导航栏</h2>
<p>本人项目中需要根据不同的角色显示不同的底图<code>tab页</code>，那么原来在<code>pages.json</code>设置的<code>tab</code>页，不够灵活，也不好扩展，因此自定义<code>tab</code>页，具体如下</p>
<ul>
<li>在<code>pages</code>文件夹中，新建一个<code>index</code>文件夹并创建一个<code>index.vue</code>页面，在这个页面可布局底部<code>tab</code>, 根据点击不同的<code>tab</code>显示对应的tab页， 如图：</li>
</ul>
<p><img src="https://img2018.cnblogs.com/blog/1347137/201911/1347137-20191107093654328-55786297.jpg" alt="" loading="lazy"></p>
<p>注意：</p>
<ul>
<li>如果每个tab点击是切换不同的view，这个就相当于单页应用了，当页面比较复杂时，切换过程可能存在卡。所以使用自定义组件的tabbar就尽量避免太多复杂页面。</li>
<li>当然原生tabbar虽然体验好，但自定义性不足。这个需要开发者根据自己的需求来平衡选择。</li>
</ul>
<h2 id="如何使用colorui">如何使用colorui</h2>
<h3 id="引入">引入</h3>
<p>ColorUI是一个css库！！！在你引入样式后可以根据class来调用组件</p>
<ul>
<li>下载源码解压获得/Colorui-UniApp文件夹，复制目录下的 /colorui 文件夹到你的项目根目录</li>
<li><code>App.vue </code>引入关键<code>Css</code> <code>main.css</code> <code>icon.css</code></li>
</ul>
<pre><code class="language-shell">&lt;style&gt;
@import "colorui/main.css";
@import "colorui/icon.css";
@import "app.css"; /* 你的项目css */
....
&lt;/style&gt;
</code></pre>
<p>此时你可以使用colorUI提供的css样式了，</p>
<p>因为colorUI的文档说明正在完善中，具体样式对应的类名可能不清楚，那么你可将color-ui下载下来，使用<code>HBuilderX</code>运行在浏览器中，打开调试工具，找到对应的节点即可获取对应的类名，（当然你也可能会有其他好的方法）。</p>
<h3 id="使用colorui自定义导航栏">使用colorui自定义导航栏</h3>
<ul>
<li><code>pages.json</code> 配置取消系统导航栏</li>
</ul>
<pre><code class="language-json">"globalStyle": {
        "navigationStyle": "custom"
},
</code></pre>
<ul>
<li><code>App.vue</code> 获得系统信息</li>
</ul>
<pre><code class="language-javascript">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
                }
        })
},
</code></pre>
<ul>
<li>在<code>main.js</code>引入<code>cu-custom</code>组件</li>
</ul>
<pre><code class="language-javascript">import cuCustom from './colorui/components/cu-custom.vue'
Vue.component('cu-custom',cuCustom)
</code></pre>
<ul>
<li>在需要的页面可以直接使用了，如下：</li>
</ul>
<pre><code class="language-html">&lt;cu-custom bgColor="bg-gradual-blue" :isBack="true"&gt;
        &lt;block slot="backText"&gt;返回&lt;/block&gt;
        &lt;block slot="content"&gt;导航栏&lt;/block&gt;
&lt;/cu-custom&gt;
</code></pre>
<h2 id="跨端兼容如何你只是开发小程序就不需要考虑">跨端兼容（如何你只是开发小程序，就不需要考虑）</h2>
<p>根据平台特性，<code>uni-app</code> 提供了条件编译手段，在一个工程里优雅的完成了平台个性化实现。</p>
<pre><code class="language-html">&lt;view class="content"&gt;
&lt;! -- #ifdef APP-PLUS --&gt;
&lt;view&gt;仅出现在 5+App 平台下的代码&lt;/view&gt;
&lt;! -- #endif --&gt;

&lt;! -- #ifndef H5 --&gt;
&lt;view&gt;除了 H5 平台，其它平台均存在的代码&lt;/view&gt;
&lt;! -- #endif --&gt;

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