uniapp

胆大如牛白展堂
0 阅读2分钟

创建项目

  1. uni-app x：在开发APP时进行勾选

image.png

运行

当初次运行时，点击运行设置进行配置

image.png

开发

mainfest.json配置和注册微信小程序appId

  1. 打开mp.weixin.qq.com/ ，注册小程序
  2. 将appid复制到hbuildx中填充‘’

安装依赖，自动导入

详细文档：blog.csdn.net/qq_18798149…

  1. 初始化依赖，安装自动引入的依赖包（报错降低一下版本适应uniapp，不成功关闭一下小程序开发平台）
  2. 创建vite.config.js

使用组件

  1. 在官网组件文档中找到想用的uni组件，例如uni-icon
  2. 点进详情点击安装

联系客服

  1. 在微信开发者平台进行配置（对应绑定的appid）
  2. 在基础功能客服中进行添加
  3. 使用button将open-type设为contact
  4. 判断是小程序还是app进行联系客服还是拨打电话

image.png

	<!-- #ifdef MP -->
	<button open-type="contact"></button>
	<!-- #endif -->
	<!-- #ifndef MP -->
	<button @click="call">拨打电话</button>
	<!-- #endif -->
        
  const call = () => {
    uni.makePhoneCall({
        phoneNumber: '114'
    })
   }

下载图片

除了使用固定的api外还要在微信小程序平台进行配置，在用户设置中

image.png

微信小程序上线流程

微信小程序开发平台

  1. 进入设置页面修改小程序信息，进行上线前准备

image.png 2. 进入开发管理：配置服务器域名

  1. 进入manifest.json，进入微信小程序， 填充appid，打钩上传压缩
  2. 点击上方菜单发行，选择微信小程序，点击发行
  3. 打包后的压缩包地址：unpackage -> dist -> dev -> mp-weixin
  4. 打包后会自动打开微信小程序开发平台，可预览。点击上传
  5. 进入小程序开发平台，版本管理页面，点击提交审核
  6. 进入审核前信息填写，使用用户隐私协议则勾选（摄像头，文件夹），点击确定提交审核。

补充：自定义进入页面： 点击小程序开发平台右上角头像，选择工具

image.png

打包H5

打包

  1. 打开manifest.json，进入web配置

image.png 2. 点击发行打包

image.png

上传unicloud

打包APP

配置

  1. 打开manifest.json
  2. 修改版本号（每次必须）

image.png 3. 配置APP图标和启动界面（勾选隐私协议）等

发行

  1. 点击运行，运行app，制作自定义基座，配置打包

image.png 2. 安装模拟器

  1. 点击运行 -> 运行到app基座 -> 选择自定义基座 查看效果
  2. 正式打包：点击发行 -> app云打包 -> 生成url可下载（只能下载5次，要做转存）
avatar
文章
阅读
粉丝