小程序 -- uni-app开辟微信小程序情况搭建（HBuilder X+微信开辟者工具） ...

圆咕噜咕噜 · 2025-1-8 05:07:13

目录
媒介
一软件部分
1. 微信开辟者工具
2. HBuilder X 开辟工具
二设置部分
1. 关于 HBuilder X 设置
2. 关于微信开辟工具设置
三运行项目
1. 新建项目
2. 代码编写
3. 内置浏览器编译
4. 设置小程序
AppID获取
注意
四实现效果

媒介

uni-app开辟小程序的已经很普遍了，固然肯定有许多人已经发过情况搭建这些，我这边只是记录我搭建的时候遇到的问题记录一下，防止之后自己忘记咯，有问题可以指出就行
一软件部分

首先我们需要用到两个东西一个是微信开辟者工具，一个是 HBuilder X，这两个东西，微信开辟者工具紧张实现的编译运行部分，代码部分需要在 HBuilder X内里进行编写和修改，固然用 HBuilder X 内置的web也可以运行起来

1. 微信开辟者工具

选择自己需要安装到的路径上就行了
微信开辟者工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/nightly.html

安装好以后

2. HBuilder X 开辟工具

XHbuilder X

https://www.dcloud.io/hbuilderx.html
把压缩包解压即可使用

打开之后界面如下

二设置部分

注：这边发起把 Node.js 情况加上哦
提供一个安装教程查看
Vue开辟 -- Node.js情况设置以及项目运行（图文讲授）文章浏览阅读1.8k次，点赞23次，收藏25次。写项目需要使用到Vue开辟，恰恰重新换电脑了，也就记录一下安装以及设置过程，记录一下遇到的问题和办理方法，方便以后看和参考。_node 项目运行

https://herui.blog.csdn.net/article/details/135671505
1. 关于 HBuilder X 设置

打开设置

选择运行设置部分找到微信开辟者路径把我们安装的微信开辟者工具安装路径放进去

还是运行设置部分找到 node 路径把我们安装的 node放进去

2. 关于微信开辟工具设置

首先点击开辟者工具的右上角进去设置

点击安全选项并把服务端口打开

三运行项目

1. 新建项目

首先在 HBuilder X 内里新建一个 Vue2 的项目
一定要选择 Vue2 不然运行不了微信小程序

2. 代码编写

软件会让我们自己建立项目，我们就可以在 index.vue 内里进行我们代码编写了
开辟过web的小同伴入门这个应该很快

3. 内置浏览器编译

我们直接点击右上编译一下看一下代码这些是否有错，没有就是会表现我们自己建立的模板

4. 设置小程序

首先我们需要进行一些设置
  如果我们是导入的别人的项目，我们需要重新获取一下 uni-app 的 id
  如果自己建立的项目可以不管这部分

找到微信小程序设置
我们需要微信小程序的 AppID 查看下面这篇文章然后获取一些
AppID获取

微信小程序注册流程及APPID获取（完备版图文教程）文章浏览阅读5.1w次，点赞83次，收藏210次。本文将图文介绍微信小程序注册、完善小程序账号信息、添加项目成员和体验成员和获取小程序ID（AppID）及小程序密钥（AppSecret）的详细流程，旨在提供简明的入门指导和实践发起。微信小程序提供了一个简朴而直接的方式，让开辟者能够快速开始他们的小程序开辟旅程。开辟者需要访问微信公众平台的官方网站，并选择“小程序”作为注册范例。这个过程中，你会被要求提供一些基本信息，包括但不限于你的个人或企业信息。值得注意的是，根据你的开辟目的选择准确的账号范例非常紧张，因为它会影响到你可以使用的微信小程序功能和权限。_微信小程序appid

https://blog.csdn.net/Captinyoo/article/details/136433186
注意

这个ID 和我们登录的微信开辟者工具登录的微信需要关联否则运行不了
如果我们需要运行别人的小程序，也需要修改这个部分