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


相关文章
|
21天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
326 7
|
21天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
401 1
|
16天前
|
存储 小程序 安全
微信的开发管理都需要配置什么?
【10月更文挑战第17天】微信的开发管理都需要配置什么?
26 0
|
21天前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
230 0
|
25天前
|
小程序
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
346 0
|
1月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
95 7
ly~
|
2月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
74 6
|
25天前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
133 1
|
30天前
|
小程序 前端开发 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【10月更文挑战第3天】随着移动互联网的发展,微信小程序凭借便捷的用户体验和强大的社交传播能力,成为企业拓展业务的新渠道。本文探讨了小程序全栈开发中的身份认证与授权机制,包括手机号码验证、微信登录、第三方登录及角色权限控制等方法,并强调了安全性、用户体验和合规性的重要性,帮助开发者更好地理解和应用这一关键技术。
46 5
|
30天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【10月更文挑战第3天】微信小程序作为新兴应用形态,凭借便捷体验与社交传播能力,成为企业拓展业务的新渠道。本文探讨了微信小程序全栈开发中的PWA技术应用,包括离线访问、后台运行、桌面图标及原生体验等方面,助力开发者提升小程序性能与用户体验。PWA技术在不同平台的兼容性、性能优化及用户体验是实践中需注意的关键点。
50 5