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 地址就可以轻松进行开发,这是你就要分开环境了,我们的开发环境和生产环境!


相关文章
预约按摩小程序开发,为什么很多上门按摩平台根本招聘不到优秀技师?
上门按摩平台面临招不到优秀技师的问题,主要原因是平台众多,技师选择多样。为解决此问题,平台可引入技师等级制度,根据订单数量和好评率划分高、低等级技师。高等级技师可享受70%-90%的高提成及首页推荐,这不仅能激励技师的积极性,还能帮助平台筛选出优质技师,提升服务质量和口碑,形成良性循环。
|
18天前
|
设计模式 开发框架 JavaScript
基于.NET8 + Vue/UniApp前后端分离的快速开发框架,开箱即用!
基于.NET8 + Vue/UniApp前后端分离的快速开发框架,开箱即用!
|
1月前
|
人工智能 小程序
【一步步开发AI运动小程序】五、帧图像人体识别
随着AI技术的发展,阿里体育等公司推出的AI运动APP,如“乐动力”和“天天跳绳”,使云上运动会、线上健身等概念广受欢迎。本文将引导您从零开始开发一个AI运动小程序,使用“云智AI运动识别小程序插件”。文章分为四部分:初始化人体识别功能、调用人体识别功能、人体识别结果处理以及识别结果旋转矫正。下篇将继续介绍人体骨骼图绘制。
|
1月前
|
人工智能 小程序 vr&ar
AI运动小程序开发常见问题集锦二
截至当前,我们的AI运动识别小程序插件已迭代至第23个版本,广泛应用于健身、体育、体测、AR互动等场景。本文针对近期用户咨询,汇总了常见问题,帮助用户减少开发成本,提高效率。主要涵盖计时与计数模式的区别、综合排行榜生成方法、全屏模式适配及无开发能力用户的解决方案。
|
1月前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统,都有哪些功能?
在快节奏的现代生活中,家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题,如服务质量不稳定、价格不透明等,我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式,解决了私单、复购、推广和盈利四大痛点,全面提升了服务质量和用户体验,旨在成为家政行业的领导者。
|
2月前
|
存储 传感器 小程序
跳绳计数小程序开发系统
首先,我们需要明确跳绳计数小程序的核心功能:为用户提供跳绳计数的便捷方式。这意味着小程序需要能够准确地记录用户的跳绳次数,并为用户提供清晰、直观的计数展示。
|
2月前
|
存储 小程序 安全
微信的开发管理都需要配置什么?
【10月更文挑战第17天】微信的开发管理都需要配置什么?
32 0
|
2月前
|
小程序 搜索推荐 前端开发
小剧场短剧影视小程序开发
小剧场短剧影视小程序旨在为用户提供一个便捷、互动的平台,让用户能够随时随地观看、分享和评论各类小剧场短剧。通过小程序,用户可以浏览热门短剧、搜索感兴趣的内容、参与社区互动,以及享受个性化的推荐服务。
|
2月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
583 7
|
2月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
704 1