不懂编程的小白如何用一天时间上手微信小程序开发
发表时间：2024-07-11 19:31:46
文章来源：炫佑科技
浏览次数：87
菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技
不懂编程的小白如何用一天时间上手微信小程序开发
AI儿童绘画项目、AI商业圆桌创始人
我是一名新手，不懂任何编程代码，也不知道如何开发微信小程序。
今天花了一天时间入门微信小程序开发。（代码由GPT4完成）
开发小程序如下。一个非常简单的小程序
屏幕上显示99道100以内的随机加减题，并显示或隐藏答案。
（等我学完了再更新功能更复杂的小程序开发，今天只是初步的开始）
1.下载微信开发工具
1.1打开链接：
进入下载后，可以看到有好几个版本，怎么选呢？对于我这种新手，当然是选择稳定版啦！然后根据自己电脑的版本选择就行了。
1.2 如何查看系统版本
首先点击窗口，然后点击设置按钮，然后在新弹出的窗口中点击系统按钮。
在新界面点击关于，找到你的系统类型，就知道你的电脑需要下载什么版本了。
1.3 如何检查 macOS 的系统版本
单击桌面左上角的 Apple 图标，然后选择“关于本机”。
在新弹出的窗口中找到您的芯片。对于 Apple M1 和 M2学微信小程序开发难吗，请选择 ARM64 版本，对于 Intel 芯片，请选择 X64 版本。
1.4 安装
在计算机上下载后，打开安装包并按照软件要求进行操作。
1.5 macOS 安装
下载完成后打开安装包进行安装，苹果电脑只需要将程序拖到应用程序文件夹即可。
2. 注册微信小程序账号
2.1
单击链接并选择注册
然后只要按照提示进行注册即可。
注册成功后，进入小程序后台，在开发管理中选择开发设置，找到APPID进行备份。
好的，*难的部分现在已经完成，剩下的就很容易了（错）！
3. 编写代码
经过我的测试，4生成的代码是可以直接运行的。
3.5 等大型模型会报错。对于我这个代码新手来说，
我无法理解错误并且无法更改它，所以我*终使用4来生成所有代码内容。
3.1 我的小程序提示是：
帮我写一个微信小程序代码，
随机生成100以内的加减运算。
包含一个标题、两个按钮（用于生成问题和切换答案的显示/隐藏）
以及可滚动的表格视图。
表格视图中的每个单元格显示一个问题及其答案（如果启用“显示所有答案”）。
该表有 4 列，每列有 25 个问题。
（以后大家可以根据自己的需求来写说明，**次写不妨先模仿一下）
3.2 回答我：
这是一个简单的微信小程序代码，随机生成100道100以内的加减运算题，并以表格视图展示出来。
目录结构如下：
═── app.js
│ ...
│ ...
│ 页面
│ │── 首页
│ │ │ │ │
│ │ │── index.json
│ │ │ │ │ │
│ │ └── index.wxss
在app.json中添加以下内容：
"页面"：[
“页面/索引/索引”
]，
"：{
““： “光”，
"": "#fff",
"xt": "随机数学问题",
“le”：“黑色”
在app.wxss中添加以下内容：
{
： 柔性;
弹性包裹：包裹；
-： 空间-;
。物品 {
宽度：23%；
-：10像素；
文本对齐：；
：1px 实线#ccc;
：10像素；
-：5像素；
在pages/index/index.json中添加以下内容：
"xt": "随机数学问题"
在pages/index/index.wxml中添加以下内容：
随机生成100以内的加减法
生成问题
显示/隐藏答案
{{item.}} {{?item.:''}}
在pages/index/index.js中添加以下内容：
页（{
数据： {
：[]，
： 错误的，
}，
（）{
常量= [];
对于（设 i = 0; i < 100; i++）{
const num1 = Math.floor(Math.() * 100);
const num2 = Math.floor(Math.() * 100);
const = Math.() > 0.5;
const = ? `${num1} + ${num2}` : `${num1} - ${num2}`;
const = ?num1 + num2 : num1 - num2;
。推（{ ， }）;
这。（{ }）;
}，
（）{
这个。（{：！这个.数据。}）；
}，
});
现在，你可以在微信开发工具中预览和调试此小程序。点击生成问题按钮将生成 100 道随机加减题并以表格视图显示。点击显示/隐藏答案按钮将切换答案的显示。
3.3 生成小程序
使用刚刚绑定微信小程序后台的微信号扫描二维码，登录【微信开发工具】
我要做小程序，当然选择小程序啦，大家根据自己需求选择，然后点击加号
点击加号，进入该界面
名称：可以自己定义
目录：无需修改
AppID：这里填写注册小程序后台时的AppID
开发模式：小程序
后端服务：对于**个简单的程序，不需要使用云服务
模板选择：基本模板
然后单击“确定”
进入新界面后按照提示将生成的代码复制粘贴到相应位置
按照提示，进入每个具体文件，然后复制粘贴。如果文件中已经有代码，可以全部选中并删除后再粘贴。
这里需要注意的是，小程序中的index.js文件就是index.ts文件。
复制完成后程序就生成了，点击预览就可以在手机上查看，如果没有问题就可以点击上传了。
3.4 修改
但是这样上传感觉有点太丑了？？于是继续求修改
我想要两个按钮分别排列在左右两侧，并固定在略低于顶部的位置
回答 3.4.1
为了实现这个要求，你可以在页面的CSS文件中设置按钮样式，使它们左右对齐，并且固定在顶部稍下方。
首先，在 pages/index/index.wxss 文件中添加以下 CSS 样式：
.- {
： 柔性;
-： 空间-;
： 固定的;
顶部：20px；
左：0；
右：0；
：0 10像素；
{
弹性：1；
：0 10像素；
接下来，将按钮放入新的视图标签中，并将 - 类添加到视图标签。
修改pages/index/index.wxml文件如下：
生成问题
显示/隐藏答案
随机生成100以内的加减法
{{item.}} {{?item.:''}}
这样两个按钮就会左右排列，并且固定在略低于顶部的位置，同时我们调整-view的-top值，保证不遮挡内容。
3.5 修改*2
所以我得到了这个效果，但我认为它仍然有点丑
我希望按钮上的文字更小一些
回答 3.5.1
为了使按钮上的文本变小，您可以在 CSS 文件中设置按钮的字体大小。
在pages/index/index.wxss文件中，添加font-size属性，如下所示：
{
弹性：1；
：0 10像素；
font-size: 14px; /* 设置按钮文字大小 */
通过设置font-size属性，可以调整按钮上文字的大小。这里我们设置字体大小为14px，你可以根据需要调整为其他值。
3.6 修改*3
稍好一些，但还不够
我想给按钮添加颜色
回答 3.6.1
要给按钮添加颜色，您可以在 CSS 文件中设置按钮的背景颜色和文本颜色。
在 pages/index/index.wxss 文件中，添加 -color 和 color 属性，如下所示：
{
弹性：1；
：0 10像素；
字体大小：14px；
-color: #; /*设置按钮背景颜色*/
color: #; /*设置按钮文本颜色*/
这里我们将按钮背景颜色设置为#(绿色)，按钮文字颜色设置为#(白色)。你可以更改这些值来设置你喜欢的颜色。
3.7 修改*4
这还不够，你可以做点别的事
如何改变两个按钮的颜色？
回答 3.7.1
如需为两个按钮设置不同的颜色不懂编程的小白如何用一天时间上手微信小程序开发，可以给按钮分别添加类名，并在CSS文件中设置相应的背景颜色和文字颜色。
首先，在pages/index/index.wxml文件中，添加两个按钮的类名：
生成问题
显示/隐藏答案
接下来，在 pages/index/index.wxss 文件中，为新添加的类名设置 -color 和 color 属性：
{
-color: #; /* 设置按钮 1 的背景颜色 */
color: #; /*设置按钮1的文本颜色*/
{
-color: #; /* 设置按钮 2 的背景颜色 */
color: #; /*设置按钮2的文本颜色*/
*后，将原始选择器更改为包含新类名的选择器：
.,
{
弹性：1；
：0 10像素；
字体大小：14px；
现在，两个按钮将具有不同的颜色。在此示例中，我们将按钮 1 设置为绿色，将按钮 2 设置为蓝色。您可以更改这些值以设置您喜欢的颜色。
3.8 修改*5
嗯，还不错，刚要上传的时候发现一个问题，答案里有负数和大于100的数字，这……继续修改
我希望随机加减的答案不要是负数。
回答 3.8.1
为了保证随机生成的加减答案不为负数，可以在生成题目的时候做适当的调整。在 pages/index/index.js 文件中，我们可以修改生成题目的逻辑来满足这个要求。
修改pages/index/index.js文件中的函数如下：
（）{
常量= [];
对于（设 i = 0; i < 100; i++）{
const num1 = Math.floor(Math.() * 100);
const num2 = Math.floor(Math.() * 100);
让 ;
如果 (num1 >= num2) {
=数学。（）> 0.5；
} 别的 {
=真；
const = ? `${num1} + ${num2}` : `${num1} - ${num2}`;
const = ?num1 + num2 : num1 - num2;
。推（{ ， }）;
这。（{ }）;
}，
在这个修改版本中，我们首先检查 num1 是否大于或等于 num2。如果 num1 大于或等于 num2，我们仍然可以随机选择加法或减法。但是，如果 num1 小于 num2，我们只选择加法以确保答案不为负数。这样，生成的加法和减法问题的答案将始终为非负数。
3.8.2 继续提问
加法得出的答案不超过100
回答 3.8.3
为了保证加法生成的答案不超过100，可以在生成问题的时候做适当的调整。在pages/index/index.js文件中，我们可以修改生成问题的逻辑来满足这个要求。
修改pages/index/index.js文件中的函数如下：
（）{
常量= [];
对于（设 i = 0; i < 100; i++）{
让 num1 = Math.floor(Math.() * 100);
让 num2 = Math.floor(Math.() * 100);
让 ;
如果 (num1 >= num2) {
=数学。（）> 0.5；
} 别的 {
=真；
// 如果是加法，且答案大于 100，则调整 num2 的值
如果 ( && 数值1 + 数值2 > 100) {
数字2 = 100-数字1；
const = ? `${num1} + ${num2}` : `${num1} - ${num2}`;
const = ?num1 + num2 : num1 - num2;
。推（{ ， }）;
这。（{ }）;
}，
在这个修改版本中，在判断是加法运算后，我们再检查num1 + num2是否大于100，如果大于100，我们就将num2的值调整为100 - num1，以保证加法生成的答案不超过100。这样生成的加减题就会符合你的要求了。
3.8.2 继续提问*2
我发现我的意思没有被很好地理解，所以我调整了提问的方式！
这段代码能保证加法产生的答案不超过100，减法产生的答案非负吗？
回答 3.8.3
抱歉，上面的答案不太符合你的要求。我现在提供一个修改后的版本，确保加法产生的答案不超过 100，减法产生的答案为非负数。
请修改 pages/index/index.js 文件中的函数如下：
（）{
常量= [];
对于（设 i = 0; i < 100; i++）{
让 num1 = Math.floor(Math.() * 100);
让 num2 = Math.floor(Math.() * 100);
让 = Math.() > 0.5;
如果 （） {
// 如果是加法，确保答案不超过 100
while (num1 + num2 > 100) {
num2 = Math.floor(Math.() * 100);
} 别的 {
// 如果是减法，请确保答案是非负的
while (num1 < num2) {
num1 = Math.floor(Math.() * 100);
const = ? `${num1} + ${num2}` : `${num1} - ${num2}`;
const = ?num1 + num2 : num1 - num2;
。推（{ ， }）;
这。（{ }）;
}，
在这个修改版本中，我们分别处理加法和减法的情况。如果是加法，我们检查 num1 + num2 是否大于 100，如果是，我们重新生成一个新的 num2，直到答案不大于 100。如果是减法，我们检查 num1 是否小于 num2，如果是，我们重新生成一个新的 num1，直到答案为非负数。这样，我们就可以确保加法生成的答案不大于 100，减法生成的答案为非负数。
4. 提交审核
*后我满意了，就上传到微信小程序后台审核，审核通过后，大家就可以在微信上查看了！
在提交审核界面按要求填写信息后，点击提交审核。
审核通过后，你的小程序即可上线啦！
很简单不是吗？**次操作不熟悉很正常。
按照SOP，有耐心，一步一步做。
万事开头难，但只要迈出**步，一切都会好起来。
