从零开始的微信小程序学习日记

Bigbag137991

day1
---首先呢，非常荣幸加入到吾爱破解这一大家庭。本人也是老破解发烧友了。
但是呢，本人应该是在15年左右接触到的这些东西，当时也没想着学习一些什么东西，等到回过神来不知什么时候这边停止注册了。
当时也是流下了贫穷的眼泪，之后也没什么时间，每次开放注册都错过。
这次呢也是运气好吧，正好赶上了本次的注册。这些技术类的东西不能再继续看下去了，总是看哪能会啊，实践才能出真知。
于是乎！本人决定发奋图强从朋友推荐的小程序学起，同时呢更新从零开始的微信小程序学习日记。戒掉懒惰，脚踏实地重新做人


扯了半天，现在正式开始。

• 了解微信小程序
  

首先我们先要了解关于微信小程序方面的一些知识、什么是小程序呢？其实我也不太懂，这时候就要问问我们万能的百度了。。。

可以看到我们搜索到了两个信息，一个是JS-API和JS-SDK，那么这是什么东西呢，继续追根溯源，


OK，JS-API本人理解类似一种 ”超链接“形式的框架结构（不知道理解的是否正确哈，不正确之后慢慢学习了解多了就总能改正的）、SDK也差不多（先这么理解着，希望别误人子弟咯）。

• 安装软件
  

具体怎么安装直接搜一下教程就好，安装软件很简单。打开是这样的

本人作为编程零基础目前也是不明白这么文件都是什么意思。那么我们就先不详细了解这些都是什么，我们简单明白一下都是做什么的。
上面的“pages”故名思意就是代表各个小程序的画面，也就是页面。里面这四个文件我们先不管，在之后实践的时候终将会明白的。
之后的”utils“本人理解，可以用游戏中的“mod”代指，也就是往里面加入项目的模组之类的。
下面带有"app“字样的文件是全局文件也就是所谓的”总代{过}{滤}理“。
”js“所需要的功能接入或者请求、”json“各个模块的开关、“wxml”各个模块、“wxss”模块形状颜色等。

先学这些朋友们。本人纯懒🐖。就码这点字就搞了一个下午完美使用了本人周末的黄金时间。
（目前为止以上内容定有我理解不对的地方，一开始从零学习肯定也有很多弯路要走，咱首先想个口号：”不忘初心，砥砺前行“装装文化人。）



day2  （由于之前多次开贴违规被删，故这次简单补一下之前更新的内容）
---
朋友们，一日不见是个三秋啊，作为一名勤奋的鸽子。今日我们继续接触微信小程序（第一次网络发帖，没想到会被这么多大佬围观，瑟瑟发抖）
今天呢，咱们就搞清楚全局处理中“app.json”各个代码都代表着什么意思。


（这个是总效果图，我们仅看Bigbag导航栏和底部tab栏这两部分）

• pages
  

在pages里面加入一个自己新建的页面，新建新建文件夹、在文件夹基础上新建pages，以本人名字为例Bigbag。
这时可以看到我们的全局文件“app.json”文件的“pages”中会显示出刚刚新建的路径。不过在左侧可视化看不出来啥效果，我们先不管它。
（不过反向手动输入的时候，不知道为什么不会在左侧的文件栏生成新建的“pages” 文件，先不管）

• window
  

我们可以看到下面有4行代码，依次代表的意思呢，我们直译为“背景字体风格”、“导航栏字体风格”、“导航栏文字内容”、“导航栏背景颜色”。
那么我们改变一下字体和颜色，看一下左侧的可视化页面会发生什么改变?

"blackgroundTextStyle"它的值更改之后发现没什么变化，其他三个变化很明显。那我们先不管这一小小的挫折，继续向下进行学习。

• tabBar
  

“tabBar”可以看作为是小程序底部模块。首先呢，我们先进入微信小程序开发文档
在指南，配置小程序，全局配置中找到我们即将要加入的”tabBar“，我们直接复制代码到微信小程序，更正一下pages路径"pages/logs/logs"。
这时我们进行编译，观察左侧的变化

这时我们可以看到底部出现两个模块，正是刚刚加入的“首页”和“日志”。宣告阶段性成功，短暂庆祝下
选择框架，找到“tabBar”，可以看到很多属性，那么我们先尝试插入前两个属性试一下。

奥！原来是这样，我们可以看到底部两个文本颜色发生了变化，“首页”是我们现在选中的状态，“日志”是未被选中的状态。
这正是刚刚插入这两行代码的功劳。

经过我们的简易装饰呢，现在看着这个全局页面还挺好看花花绿绿的，但还是略有不足之处。
“list”数组中我们还想放点东西，把这底部tab加上图标，变得更好看。

插入代码"iconPath"和"selectedIconPath"这两个和上面已经讲过的tab文字的颜色类似，分为选中和未选中。
iconfont-阿里巴巴矢量图标库，阿里的免费图库，如果大家也想要动动勤劳的小手，可以到这里面下载想要的图标。

我们从点击第二新建一个准备放图片的文件夹，命名为“images”，之后回到我们电脑里面存放项目的文件夹路径。
在这里可以看到images文件已经创建成功，之后从刚刚的网站中下载一些好看的图标放在刚刚新建好的images文件中。
敲黑板！！见证奇迹的时刻到了！

也可以将下面tab栏加上背景颜色
当当当当！！可以看到现在的底部tab栏已经今非昔比了，完美易容。

太激动了！真真真没想到第一次发帖就这么多人观看，甚至被评分！
各位真给了我很大更新的动力，不然这篇日记（也可能是周记）鸽到这周五也不一定呢！！
老样子，口号，1~2~喊：”不忘初心，砥砺前行！“


day3（简单附图）
---
有很多志同道合的朋友们添加本人好友，这里我感到一丝丝的窃喜和深深的歉意，由于本人积分不够目前还无法添加好友，还请各位大佬海涵。
还有呢，我刷到了一些帖子，他们的排版特别特别好，我也要继续努力进行学习进步。
看到他们可以在这篇文章中，把所有关于这个系列的链接放在一起，这是怎么弄的呢，待我钻研钻研。这样的好处在于条例特别清晰，我觉得本人码字已经很乱了，应该改一改。
还有的可以在下面继续编辑更新内容和日期，这种模式也很不错，待我钻研钻研。码字也是一门艺术啊！！

昨天呢，在全局部署中简单学习了一下如何“装饰”底部tab栏，那么今天呢，我们就好高骛远继续往下学习！！
终于慢慢进入正题了，今天我们学习“pages”中的页面部署

• index
  

下面进行“wxml”的部署
首先我们将这四个文件中的代码全部删除，并进行简单的部署
这时我们简单插入两行代码“view”和“image”，分别意味着插入文字和插入图片。（再此之前我们需要修改一下上面“index-js”中的代码，改为page（{}），不然会导致显示错误）
我们先看一下成果，然后为大家详细阐述一下

[Asm] 纯文本查看 复制代码

<view class="Bb_class">Bigbag </view>
<view>
<view class="Bb137_class">137991 </view>
<view>Samllbag </view>
</view>

这几行代码呢，就是代表着按顺序上面的这三行字体。

[Asm] 纯文本查看 复制代码

<view>
  <image class="alma_class" src ="/images/alma.jpg" mode=""/>
</view>
<view>
  <image class="clannad_class" src="https://www.pixelstalk.net/wp-content/uploads/2016/12/Picture-of-Clannad-After-Story-Wallpaper.jpg" mode=""/>
</view>

这两行代码呢，第二行表示本地文件images文件中的图片（不要忘记插入图片的后缀）；第五行表示网络上的链接图片。

[Asm] 纯文本查看 复制代码

<input placeholder="输入图片对象姓名" class="input_class" type="text"></input>
<button class="button_class">点点我</button>

可以看到小程序中出现可以输入文字的光标，通过第一行代码可以使我们直接在小程序中输入文字；第二行代码可以生成一个按钮。
我们的老二次元页面也就简单部署完成了，即使不够成熟、不够漂亮。

那么今天的简单部署就到这里，其实本想二合一的。但是最近打羽毛球打的太猛了，腰酸背疼手抽筋
加上本人码字实在过于跳脱，实在是坐不住了，必须化身为小趴菜了。
今日最后最后，口号~，睡觉！！！


day4
---
今天呢我们就，进行继续进行小程序界面的一个优化和建议的图文排版。

首先呢，我们与昨天相比增加了很多代码，今天我们来讲解下新增代码有代表着什么意思呢？
这里其实用到的只有两个函数“class”和“placeholder”
那么前者呢，class代表着“归类”也可以理解为“命名”，可以理解为我将每一个图片，文本框和按钮都进行了一个命名。
后者呢，placeholder是一个”input type“中特有的函数，可以将其理解为可输入文本框中的提示字体。
从上面张图片的左侧小程序中，我们也看到了一些简单的图片排版和文字排版，这些都是在“wxss”中进行调试的属性。
下面就是对wxss文件的简单部署和阐述  

• wxss
  

我们通过左侧微信小程序可视化和代码结构的形式进行讲解。

[Asm] 纯文本查看 复制代码

.Bb_class {
  background-color: rgb(255, 0, 0);
  color: rgb(255, 255, 255);
  font-weight: bolder;
  font-size: 40rpx;
  text-align: center;
  border-radius: 15rpx;
  padding: 80rpx 20rpx;
  margin: 50rpx;
}

第一行代码呢，正是之前我们在“wxml”文件之通过“class”函数进行命名的文件名称.Bb_class
"background-color: rgb(255, 0, 0)"代表着背景颜色，rgb是颜色的一种表示形式。
“color”代表着文字颜色；“font-weight"代表字体粗细；“font-size”代表字体大小；"text-align"代表文字位置；"padding"和"margin"分别代表这内外边距。
这些东西呢，通过调整大家都可以理解到，啊~原来是这样。所谓熟能生巧也正是如此。  

[Asm] 纯文本查看 复制代码

.alma_class {
  width: 400rpx;
  height: 400rpx;
  border-radius: 50%;
  margin: 20rpx 0rpx 20rpx 165rpx;
}

与之前的文字属性一样，我们继续将微信小程序可视化与代码进行对应理解，这样会很容易加深我们的印象。
首先是两张图片属性，"alma_class"和"clannad_class"这俩组代码的构成基本相同，只不过里面赋值的书写形式稍微存在差异
比如，"width: 400rpx"和"width: 100%"单纯是形式上存在差异，但是表示均为图片的宽度，其他的赋值同理。（正常情况下我们就书写一种形式即可）
"height"代表图片的高; "border-radius"图片剪切效果（我们可以看到第二章图片的那个角上都有一个明显的半圆）
"margin"规则是上右下左。

[Asm] 纯文本查看 复制代码

.input_class {
  border: 5rpx solid rgb(110, 104, 104);
}

之后就到了我们的文字输入栏了
input_class我们只是简单改变了一下他的边框样式，"border"赋值依次为”线宽、线型、颜色“
最后一个button就不讲了，这个函数意思简单明了。  

鸽了一天简单学习了一下MD，因为我这边目前看不到文字格式，只能看到MD语法的输入。
所以一会发表我要看看是否成功！！成功与否我都不改，成功大家就正常看，不成功大家就跟着我一起看乱七八糟的代码+文字
那么今天就到这里咯，口号！
不忘初心！砥砺前行！！

day5
---
朋友们，我回来了
度过了愉快的周末，又开始进行苦逼的微信小程序学习了（打滚，发疯！！！）
我们简单的页面部署学习的其实也差不多了
那么今天呢，我们来进行一个简单的商城页面实战。

咱们开始

我们可以看下这个界面，是不是感觉很熟悉呢，有一些商家做的简单微信小程序差不多都是这种样式的。（图片发不出来了，一会发在评论区里面吧！！"Figure 1"）
那么如何做出这样的界面其实我们首先需要一些简单的规划。  （思路最重要了）

• 在底部tab上，可以看到我们加入一个商城页及其一些简单部署
• 在界面上，我们可以看到是插入了几张图片和文字
• 在图片排布方面，我们猜测这是flex函数排布，应该是横向的排布形式
• 在文字方面呢，同样是flex排布，排布方式应该是横向的排布
• 文字颜色的更改  
  

那么既然我们已经完全分析完成这个页面的组成，之后的所有步骤都是一些代码的堆叠来完成这一内容。
首先是底部tab的添加，我们来进行简单回忆一下"app.json"中，  
"iconpath"未选中图片"; selectediconpath"选中图片; "pagepath"路径地址。  
  
之后呢，在完成底部tab部署之后，我们就要进行对界面的部署了  

我们可以看到画的这四个红色框框，把它分成了四个部分。 "Figure 2"
分别为“商品总体部分”、“商品图片部分”、“商品标题文字部分”、“商品其他文字部分”
那么我们以这段代码为例，剩余几段代码完全一致，唯一不同就是更换一下图片。"wxml"中  

[Asm] 纯文本查看 复制代码

<!-- 整体盒子 -->
<view class="big-box">
<!-- 每个商品 -->
  <view class="item">
    <image class="img" src="https://ts1.cn.mm.bing.net/th/id/R-C.17d2d30fcabcc1e4c952f40e150306d3?rik=2kgYUQHDYisk4Q&riu=http%3a%2f%2fp5.qhimg.com%2ft0174b7765fa7bbd0b9.jpg&ehk=FcM1ushU3RPV9D1YkCUE9r4WTsAwodie7GfBfmhH%2bBE%3d&risl=&pid=ImgRaw&r=0" mode=""/>
    <view class="title">雷碧</view>
<!-- 底部文字 -->
    <view class="item-bottom">
     <view class="number">剩余: 99</view>
     <view class="price">￥1.50</view>
    </view>
  </view>

这段代码呢，我们也加入了注释，让大家更加容易理解。  
之后就是对我们图片和文字的部署了  

可以看到，目前是我们还没有部署的状态，那么我们现在要通过刚刚的规划一步一步进行下去。 "Figure 3"



首先我们在"wxss"中对整个商品进行部署

[Asm] 纯文本查看 复制代码

.big-box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20rpx;
}

我们可以看到出现了几个新代码分别代表着什么呢？  
"display: flex"是一个全局排版的函数；"flex-direction: row"代表着排版方式为横向排版；"flex-wrap: wrap"代表着如果一行排满就自动换行。  
然后我们再加入一行代码进行商品排布的优化，"justify-content: space-between"代表着一个排列方式有点类似于两边对齐。  

[Asm] 纯文本查看 复制代码

.item-bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

之后对商品的其他文字进行美化部署，同样使用flex进行，排列方式为横向。  
这个时候其实简单的商城页面已经成型了，其他就是改变字体颜色和字体与图片之间的一些间距。  

这样也就基本结束了，那么~结束！！！  

这几天实在是太累了，真真真码不动字了，这里为喜欢看这个系列的朋友表示诚挚的歉意！！（略略~但我就是不改！！）
那么呢，下次更新本人决定。。。。。。  
（不忘初心，砥砺前行）(20240805!!!)


"已经插入不了图片了，下次更新的话，我打算再开一个新帖子，这样应该不会出现违规情况被删帖子吧"（朋友们给点建议）

Bigbag137991

欸！奇怪我图片都哪里去了？
---
我把从头开始的图片都放在评论里面吧，真是奇了怪了！！！

Figure 1


Figure 2

Figure 3

shiory

感觉跟前端框架有点像，vue之类的。

Bigbag137991

shiory 发表于 2024-7-28 22:19
感觉跟前端框架有点像，vue之类的。

特意搜了一下vue是啥，应该是差不多的东西，慢慢学习，逐渐进步

Gijia

学习的步骤，还是要多斟酌一下。

Bigbag137991

Gijia 发表于 2024-7-28 22:38
学习的步骤，还是要多斟酌一下。

反正是日记啦，慢慢养成计划

gangdaomeimei

我做过计算器之类的小程序

minglong430524

感谢大佬分享， 马克， 后续再拜读

anorith

现在微信小程序应用越来越多了，趁次机会学习一下

hygqx6

一同进步啊

beix

趁机会学习学习