运行uni-app到微信开发者工具
<h3 id="1工具及环境">1、工具及环境</h3><ul>
<li>HBuilder X</li>
<li>微信开发者工具</li>
<li>Node.js，测试：node -v（node安装） 和 npm -v（自带的npm也安装成功）</li>
</ul>
<h3 id="2创建uni-app项目">2、创建uni-app项目：</h3>
<p>在点击工具栏里的文件 -> 新建 -> 项目，选择uni-app，输入工程名，如：hello-uniapp，点击创建，即可成功创建 uni-app。点击模板里的 Hello uni-app 即可，如下图：</p>
<p><img src="https://img2020.cnblogs.com/blog/1989312/202109/1989312-20210901231431798-442677237.png"></p>
<p>一个uni-app项目，默认包含如下目录及文件：</p>
<p><img src="https://img2020.cnblogs.com/blog/1989312/202109/1989312-20210901231440679-1109463029.png"></p>
<h3 id="3运行uni-app到微信开发者工具">3、运行uni-app到微信开发者工具</h3>
<p>1、填写微信小程序的AppID：</p>
<p><img src="https://img2020.cnblogs.com/blog/1989312/202109/1989312-20210901231447890-555211109.png"></p>
<p>2、在HBuilder X，配置 ‘微信开发者工具’ 的安装路径：</p>
<p><img src="https://img2020.cnblogs.com/blog/1989312/202109/1989312-20210901231510597-238550987.png"></p>
<p>3、在微信开发者工具中，通过 设置 》安全面板，开启微信开发者工具的服务端口：</p>
<p><img src="https://img2020.cnblogs.com/blog/1989312/202109/1989312-20210901231517657-1091897434.png"></p>
<p>4、在HBuilder X，点击运行 -> 运行到小程序模拟器 -> 微信开发者工具，将当前uni-app项目编译之后，自动运行到微信开发者工具中，从而方便查看项目效果与调试：</p>
<p><img src="https://img2020.cnblogs.com/blog/1989312/202109/1989312-20210901231524765-390292003.png"></p>
<p>微信开发者工具会将uni-app项目代码自动编码为微信小程序识别的代码。非常方便。</p>
<p><strong>注意：</strong>编译运行uni-app前，在项目目录下运行：npm i。</p>
<p>每个项目都有一个package.json文件，里面有很多组件信息。使用npm i将按照package.json安装所需要的组件放在生成的node_modules文件夹中，项目下的每一个文件中都可以通过import引入node_modules的组件来加以使用。</p>
<h3 id="4其他问题">4、其他问题</h3>
<p>1、使用git管理项目：在项目根目录中新建 .gitignore 忽略文件 , 并配置如下:</p>
<pre><code>node_modules/
dist/
unpackage/dist\
</code></pre>
<p>在项目根目录中新建 .gitignore 忽略文件 , 并配置如下:</p>
<p>注意：此时我们忽略了 unpackage 目录中仅有的 dist 目录 , 因此默认情况下 , unpackage 目录不会被 git 追踪。此时, 为了让 git 能够正常追踪 unpackage 目录 , 按照惯例 , 我们可以在 unpackage 目录下创建一个叫做 .gitkeep 的文件进行占位</p>
<p>2、微信开发工具运行小程序报错：WebAssembly.instantiate(): Argument 0 must be a buffer source or a WebAssembly.Module object</p>
<p>解决方法：详情 》本地设置 》调试基础版本调为：<strong>2.14.4 \color{red}{2.14.4}2.14.4</strong></p>
<p>3、npm run dev</p>
<p>当我们执行<code>npm run dev</code>时，系统就会跑到package.json文件中执行scripts中对应的脚本。如下图，可以看到<code>start</code>对应的是<code>npm run dev</code>：</p>
<p><img src="https://img2020.cnblogs.com/blog/1989312/202109/1989312-20210901231541521-298502076.png"></p>
<p>4、在 src -> common -> config.js文件中，修改服务地址</p>
<p>5、微信开发者工具中，新建项目的目录为：dist -> dev -> mp-weixin</p><br><br>
来源：https://www.cnblogs.com/mind18/p/15216848.html
頁:
[1]