uniapp开发微信小程序,从构建到上线(1)

本文涉及的产品
.cn 域名,1个 12个月
简介: uniapp开发微信小程序,从构建到上线(1)

前言:


       本文主要介绍 uniapp 的基础使用,以及使用 uniapp 在企业开发的过程中的一个详细流程,比较适合第一次使用uniapp 开发微信小程序的伙伴,或者没有过实战经验的小伙伴参考;使用 Hbuildx 配合 Uniapp 框架结合 Uview 的UI框架为大家演示今天的Demo!

一、uniapp项目起步

开始之前还是先看一下官网对 Uniapp 的介绍,也让我们有个更全面的认识;


uni-app 是一个使用 Vue.js (opens new window)开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。(Uniapp 官网地址)

20210527153548522.png

1. 工具下载

 Uniapp 是配个 HBuildx 这个开发工具来使用的,所以我们要先下载 Hbuildx 开发工具;

 Hbuildx 下载地址

20210527153548522.png

2. 项目创建

 上一步我们已经下载好了 HBuildx 这个开发工具,下一步我们需要创建项目了!

 我用的是 Windows 可能和 Mac 稍有差别;左上角点击文件 --> 新建 --> 项目

20210527153548522.png

下图我们能看到有 普通项目,有 uni-app 项目

20210527153548522.png

就我个人而言,一般在工作中,我会选择新建普通项目,因为uni-app示例项目虽然很香,但是并不是很利于开发,需要删除很多东西,所以我个人选择的是普通项目;

3. 安装实用插件

20210527153548522.png

点击工具 --> 插件安装,我们可以看到 Hbuildx 给我们提供了核心插件;


  什么是核心插件呢?  就是利于我们开发,可以提高我们开发效率的东西;


  什么是插件市场呢?  我们在开发过程中,遇到了 UI 框架 或者 uniapp 内置组件满足不了我们的业务需求的,就可以前往插件市场去看看,总会有一个比较满意的!


比如我们使用 Git 往仓库提交代码,我们就可以 下载 Git 插件,辅助我们使用Git!比如我们格式化代码 我们就可以下载 Prettier 插件,ctrl + K 快捷格式化

4. 运行至微信开发工具

到这一步开发前的配置基本上已经完成了,我们要运行一下我们的项目看一下了

但是,运行小程序我们需要注意几个地方:

① 配置manifest.json文件,配置微信小程序AppID

20210527153548522.png

微信小程序AppID 哪里来? 登录微信公众平台,开发管理 --> 开发设置中

20210527153548522.png

 ②  运行微信小程序需要配置 配置开发者工具路径,这样 Hbuildx 才知道去哪里打开微信开发者工具

20210527153548522.png

20210527153548522.png

③ Hbuildx 的配置结束了,我们还需要配置微信开发者工具,不然是会运行失败的

   开启微信开发者工具中的服务端口

20210527153548522.png

20210527153548522.png

5. 项目运行

项目在运行之前我们需要先添加一点点代码才可以运行以后看到效果,不然只是一个白页面,并不是我们想看到的

 pages 下面我们新增两个页面,在 pages.json当中配置一下基础的tabbar部分

20210527153548522.png

index 代码

<template>
  <view class="content">
    <!-- <logo></logo> -->
    <!-- #ifdef MP-WEIXIN -->
    <view class="text-area">
      <button type="warn" size="default" plain open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取用户手机号</button>
      <view style="font-size: 36rpx;">
        <text>
          當前手機號為:
          <text v-show="countryCode || phoneNumber">+{{ countryCode + '-' + phoneNumber }}</text>
        </text>
      </view>
    </view>
    <!-- #endif -->
    <!-- #ifndef MP-WEIXIN -->
    <view class="text-area"><text class="title">请在微信小程序中打开</text></view>
    <!-- #endif -->
  </view>
</template>
<script>
export default {
  data() {
    return {
      title: 'Hello',
    };
  },
  methods: {
    getPhoneNumber(e) {
      if (!e.detail) {
        return;
      }
    }
  },
};
</script>
<style lang="scss">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.text-area {
  width: 80%;
  margin-top: 35%;
  font-size: 48rpx;
  button {
    margin: 60rpx 0;
  }
}
</style>

H5 代码

<template>
  <view class="h5">
    <logo></logo>
    <view class="h5-title">
      <!-- #ifndef H5 -->
      <text>请在H5平台打开</text>
      <!-- #endif -->
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
      };
    }
  }
</script>
<style lang="scss">
.h5{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  &-title{
    font-size: 48rpx;
  }
}
</style>

然后点击运行,运行到微信小程序,就可以看到我们刚才写的内容

20210527153548522.png

6. 个性化小程序

20210527153548522.png

什么是个性化小程序呢?就是不同的Tabbar,不同的导航栏,展示和普通小程序不一样的效果,这个中间凸起的Tabbar 我们可以使用Uview里边的Tabbar,也可以自己去定义一个tabbar,详细的自定义tabbar教程大家可以看  自定义tabbar教程 ,其他的个性化设置我们就不一一说了,感兴趣的可以查一下!

7. 开发时如何调用API

相信大家都知道开发微信小程序需要配置服务器域名,而且服务器域名必须是 https:// 开头,拥有SSL证书,域名经过备案等等....... 难道我们开发时就要提前设置好吗?

也不一定,如果我们公司,或者客户在起初并没有给到我们域名的时候,我们可以微信开发者工具里,勾选不校验合法域名、web-view(业务域名)、TLS版本以及HTTPS证书 ,然后利用我们的局域网 IP 地址就可以轻松进行开发,这是你就要分开环境了,我们的开发环境和生产环境!


相关文章
|
11天前
|
人工智能 小程序
【一步步开发AI运动小程序】十五、AI运动识别中,如何判断人体站位的远近?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,无需后台支持,具有快速、体验好、易集成等特点。本文介绍如何利用插件判断人体与摄像头的远近,确保人体图像在帧内的比例适中,以优化识别效果。通过`whole`检测规则,分别实现人体过近和过远的判断,并给出相应示例代码。
|
5天前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十七、如何识别用户上传视频中的人体、运动、动作、姿态?
【云智AI运动识别小程序插件】提供人体、运动、姿态检测的AI能力,支持本地原生识别,无需后台服务,具有速度快、体验好、易集成等优点。本文介绍如何使用该插件实现用户上传视频的运动识别,包括视频解码抽帧和人体识别的实现方法。
|
10天前
|
人工智能 小程序 UED
【一步步开发AI运动小程序】十六、AI运动识别中,如何判断人体站位?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,本地引擎无需后台支持,具备快速、体验好、易集成等优势。本文介绍如何利用插件的`camera-view`功能,通过检测人体站位视角(前、后、左、右),确保运动时的最佳识别率和用户体验。代码示例展示了如何实现视角检查,确保用户正或背对摄像头,为后续运动检测打下基础。
|
16天前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十三、自定义一个运动分析器,实现计时计数02
本文介绍如何利用“云智AI运动识别小程序插件”开发AI运动小程序,详细解析了俯卧撑动作的检测规则构建与执行流程,涵盖卧撑和撑卧两个姿态的识别规则,以及如何通过继承`sports.SportBase`类实现运动分析器,适用于小程序开发者。
|
10天前
|
移动开发 小程序 PHP
校园圈子论坛系统采取的PHP语音和uni账号开发的小程序APP公众号H5是否只需要4800元?是的,就是只需要4800元
关于校园圈子论坛系统采用PHP语言和uni-app开发的小程序、APP、公众号和H5是否仅需4800元这个问题,实际上很难给出一个确定的答案。这个价格可能受到多种因素的影响
40 8
|
6天前
|
人工智能 小程序 数据处理
uni-app开发AI康复锻炼小程序,帮助肢体受伤患者康复!
近期,多家康复机构咨询AI运动识别插件是否适用于肢力运动受限患者的康复锻炼。本文介绍该插件在康复锻炼中的应用场景,包括康复运动指导、运动记录、恢复程度记录及过程监测。插件集成了人体检测、姿态识别等功能,支持微信小程序平台,使用便捷,安全可靠,帮助康复治疗更加高效精准。
|
11天前
|
人工智能 小程序 JavaScript
【一步步开发AI运动小程序】十四、主包超出2M大小限制,如何将插件分包发布?
本文介绍了如何从零开始开发一个AI运动小程序,重点讲解了通过分包技术解决程序包超过2M限制的问题。详细步骤包括在uni-app中创建分包、配置`manifest.json`和`pages.json`文件,并提供了分包前后代码大小对比,帮助开发者高效实现AI运动功能。
|
2月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
680 7
|
2月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
742 1
|
2月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
146 7
下一篇
DataWorks