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


相关文章
|
30天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
452 7
|
4天前
|
设计模式 开发框架 JavaScript
基于.NET8 + Vue/UniApp前后端分离的快速开发框架,开箱即用!
基于.NET8 + Vue/UniApp前后端分离的快速开发框架,开箱即用!
|
30天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
504 1
|
30天前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
203 3
|
1月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
177 1
|
1月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
526 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
25天前
|
存储 小程序 安全
微信的开发管理都需要配置什么?
【10月更文挑战第17天】微信的开发管理都需要配置什么?
30 0
|
30天前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
308 0
|
1月前
|
小程序
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
452 0
|
1月前
|
存储 移动开发 小程序
uniapp富文本editor输入二次扩展兼容微信小程序
uniapp富文本editor输入二次扩展兼容微信小程序
61 0