uniapp开发通用小程序

本文介绍了使用uni-app开发百度、微信双端小程序的技术选型、项目创建、运行调试、发布流程以及开发注意事项。通过命令行或HBuliderX创建uni-app项目,利用uni.app编译器将统一代码转化为各平台原生代码。文中还强调了uni-app的尺寸单位、API调用、自定义组件、地图功能和条件编译的使用,提供了配置文件如pages.json和manifest.json的配置说明。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

技术背景
前端需要做一个百度、微信双端小程序,以百度小程序效果为主,本期不做微信地图模块。
基于开发双端小程序的出发点,准备采取框架开发,分别打出百度、微信的小程序发布包。根据市场主流程度,初步选中了uni-app、mpvue、taro三个框架进行比对,最终选择uni-app。

技术选型:
在这里插入图片描述
最终选型结论为 uni-app 。

uni-app功能框架图
在这里插入图片描述

uniapp项目创建

创建方式分为命令行创建HbuliderX代码编辑器创建两种。

命令行创建

  1. 全局安装vue-cli,推荐cli4.X。 命令:npm install -g @vue/cli@4
  2. 创建uni-app,命令:vue create -p dcloudio/uni-preset-vue my-project 「使用正式版,对应的是HbuliderX的最新版本」。
  3. alpha版本命令:vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project
    在这里插入图片描述
    初次使用推荐hello uni-app模板,此模板api全面,是一个完整的demo。组件的处理方式模板内部都已经包含了。

HBuliderX代码编辑器创建

  1. 安装HBulierX软件,用于开发。
    在这里插入图片描述
  2. 工具栏里的文件 -> 新建 -> 项目(快捷键Ctrl+N)。选择uni-app类型,输入项目,选择模板,点击创建,即创建成功。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值