【uniapp】uniapp开发微信小程序入门教程

已于 2024-06-24 20:26:00 修改
阅读量859 收藏 3
点赞数 6
分类专栏： uniapp 文章标签： uni-app 微信小程序 notepad++ 前端框架
于 2024-06-24 20:24:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44490021/article/details/139934029
版权

HBuilderx中uniapp开发微信小程序入门教程

一、 环境搭建

1. HBuilderx下载安装

HBuilderx下载安装地址

2. 微信开发者工具下载安装

微信开发者工地址具下载安装

二、创建uniapp项目

选择：文件>新建>项目>uni-app
输入项目名称>选择默认模板>创建
在这里插入图片描述

三、初步运行

在HBuilderx中选择：运行>运行到内置浏览器
初次运行HBuilderx会安装项目需要的插件，并且生成一个【unpackage】文件
在这里插入图片描述

四、微信开发者工具中添加项目

1. 打开微信开发者工具，添加项目

在这里插入图片描述

2. 添加项目地址

目录：为文件选择第二步创建的项目地址 下第三步生成的【unpackage】文件
AppID：申请的小程序的 AppID
点击确定，微信开发者工具会自动编译
在这里插入图片描述

五、开放服务端口

打开微信开发者工具选择 设置>安全设置>安全
打开服务端口，并且记住【端口号】
在这里插入图片描述

六、HBuilderx中运行设置配置

在HBuilderx中选择：运行>运行到小程序模拟器>运行设置
设置内部web服务器端口：为第五步中生成的【端口号】
设置小程序运行配置中微信开发者工具路径：为安装的微信开发者工具具体路径
在这里插入图片描述

七、HBuilderx中微信小程序配置小程序AppID

打开manifest.json，选择“微信小程序配置”
设置微信小程序AppID：申请的小程序的 AppID，必须要和第四步的2中AppID保持一致
在这里插入图片描述

八、运行到微信开发者工具

在HBuilderx中选择：运行>运行到小程序模拟器>微信开发者工具
好了，大功告成~
开启你的小程序之旅吧！

如果在运行的时候报错Error: Fail to open IDE，可以参考以下文章
HBuilderx中uniapp项目运行到微信小程序报错Error: Fail to open IDE

TTong___
关注
  • 6
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用uni-app开发微信小程序的实现
10-15
主要介绍了使用uni-app开发微信小程序的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
uniapp微信开发+three.js加载3d模型
07-02
### 二、uniapp微信小程序开发 1. **配置微信开发者工具**：要开发微信小程序，需注册成为微信开发者并下载微信开发者工具，然后绑定小程序账号。 2. **项目配置**：在uniapp项目中，通过修改`pages.json`文件来...
uni-app 微信小程序之好看的ui登录页面（一）
@必意玲
12-07 7236
文章目录1. 页面效果2. 页面样式代码 1. 页面效果 2. 页面样式代码 <!-- 蓝色简洁登录页面 --> <template> <view class="t-login"> <!-- 页面装饰图片 --> <image class="img-a" src="https://zhoukaiwen.com/img/loginImg/2.png"></image> <image class="img-b" src
如何创建开发uniapp微信小程序项目？详细步骤教程
南北极之间
05-25 4804
如何创建开发uniapp微信小程序项目？详细步骤教程
uniapp 之 开发微信小程序入门详细指南
zhuangvi的博客
04-27 3084
1、HbuilderX打包需要邀请项目成员，是该项目下的成员方可打包发布；2、开发阶段，不涉及接口可以使用自己申请的临时测试号进行开发；3、开发阶段，调接口的话需要使用一致的正式申请的AppID，且开发人员（这里实质是登录微信开发者的微信号）是该小程序下的开发者角色。完结。
uni-app开发小程序（项目搭建）
博客
04-17 3603
文章《uni-app使用自定义组件》步骤在项目根目录的 components 目录下，组件符合components/组件名称/组件名称.vue，就可以直接在页面中使用组件（不用引入、注册）
uniapp微信小程序详细入门教程
最新发布
2301_76481677的博客
05-20 3000
uni-app是一个使用Vue.js开发所有前端应用的框架，允许开发者编写一套代码，即可发布到iOS、Android、Web（H5）、以及各种小程序（微信、支付宝、百度、字节跳动等）平台上。它由DCloud公司开发，整合了自家的5+ Runtime和各种小程序API，使得跨平台开发更加便捷。UniApp的目录结构遵循Vue.js项目的基本布局，并且针对跨平台开发进行了优化。
云开发壁纸微信小程序源码
02-02
【云开发壁纸微信小程序源码】是一个非常适合初学者学习uniapp云服务开发的项目，它提供了从基础到实践的完整体验。在这个项目中，你将接触到前端开发的多个重要方面，尤其是在微信小游戏和小程序环境中的应用。让...
外卖CPS微信小程序入门源码
02-03
外卖CPS微信小程序入门源码，可用于新人入门教程，无后台，云服务器搭建
五子棋游戏-微信小程序-项目源码
03-30
这是一个微信小程序项目源码，是下五子棋的单机游戏，适合新手入门参考学习。 相关指导教程请看作者发表的文章https://blog.csdn.net/zs1028/article/details/123255998
音乐类听歌小程序 uni-app 微信小程序
04-24
使用uni-app开发的音乐类听歌小程序，适配android/ios全名屏，刘海屏，异形屏等，目前仅支持h5端及微信小程序端。 安装项目依赖：npm install 前端启动命令： H5：npm run dev:h5 微信小程序：npm run dev:mp-...
uniapp基础知识—大总结
热门推荐
john_QY的博客
11-01 7万+
uni-app介绍 官方网页 uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。 即使不跨端，uni-app同时也是更好的小程序开发框架。 具有vue和微信小程序的开发经验，可快速上手uni-app 为什么要去学习uni-app？ 相对开发者来说，减少了学习成本，因为只学会uni-app之后，即可开发出iOS、Android、H5、以及各种小程序的应用，不需要再去学习开
如何使用uni-app开发微信小程序
yong_19930826的博客
06-14 1万+
uni-app 是一个使用 Vue.js 开发所有前端应用的框架。开发者编写一套代码，可发布到 iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。详细的 uni-app 官方文档，请翻阅。
uniapp开发微信小程序
weixin_43952341的博客
02-15 1882
pages.json配置easycom “custom”// 以 Xxx 开头的组件，在 components 文件夹中查找引入（需要重启服务器） "^Xxx(.*)" : "@/components/Xtx$1.vue"配置类型声明，创建components.d.ts(统一放到types文件夹下)// 组件实例类型。
Uni-app微信小程序开发
wanglei020304的博客
03-20 2173
瞎搞搞这个是看来黑马教程写下来的
uniapp开发微信小程序教程（一）
weixin_43585799的博客
12-13 5416
uniapp开发微信小程序
uni-app开发微信小程序
_JS的博客
03-31 2155
使用uni-app进行任务管理小程序的开发
❤ uniapp 开发小程序环境搭建和使用零（0 开篇-介绍和运行）
林太白
01-16 1536
❤ uniapp 开发小程序环境搭建和使用零（0 开篇-介绍和认识）
微信小程序uniapp
07-28
微信小程序uni-app是一个使用Vue.js开发的框架，可以将开发者编写的一套代码发布到iOS、Android、Web以及各种小程序平台，如微信、支付宝、百度等。uni-app支持跨平台开发，开发者可以使用uni-app开发微信小程序，并将其发布到微信平台上。uni-app提供了丰富的生命周期函数，包括app、page和component三个构造器的声明周期函数。具体的生命周期函数包括：\[2\] - app生命周期函数：onLaunch、onShow、onHide、onError等。 - page生命周期函数：onLoad、onShow、onHide、onUnload等。 - component生命周期函数：created、attached、ready、detached等。 通过使用这些生命周期函数，开发者可以在不同的阶段执行相应的操作，实现更加灵活和高效的开发。 #### 引用[.reference_title] - *1* [uniapp微信小程序系列（1）基础与入门](https://blog.csdn.net/zeping891103/article/details/126952270)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [微信小程序+uni-app知识点总结](https://blog.csdn.net/liuliuhhxxttxs/article/details/128028711)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [uniapp开发微信小程序，从构建到上线](https://edu.csdn.net/skill/mini_programs/mini_programs-31ee2719d0214d4a875a82607d1071e5)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值