共勉

本文是微信小程序开发的实战宝典，涵盖了从快速编写CSS样式、配置路径别名，到使用npm进行项目构建的现代化开发流程。同时，文章深入探讨了如何利用UI库提升开发效率，通过分包优化应用性能，以及将原生API进行封装以适应小程序环境。此外，针对提高代码质量的静态检查、自定义表格的设计实现、OCR文本识别技术的集成、表单验证的策略、自动化测试流程、邮件发送功能的实现，以及全局数据管理和实时监听也一一进行了详细阐述。通过掌握这些核心技巧和最佳实践，开发者能够打造既高效又易于维护的微信小程序。

上一篇文章：微信小程序开发一个小型商城（九、意见反馈页面）在最开始的主界面当中的自定义组件的搜索栏，是要满足搜索需求的，根据关键字进行搜索，在上方还需要定义一个input文本输入框加上一个表示取消的按钮，下方的搜索结果使用一个for循环遍历出结果，在使用position的定位后使用flex对input和按钮进行分区3:1。Js文件当中，在发送请求时候的需要带上一个参数query，表示对应传递...

上一篇文章：微信小程序开发一个小型商城（八、个人页面）在我的页面当中有一个页面反馈的栏目，单击进入后：一个tabs和易性标签一样的文字，下方文本输入框和上传图片按钮和提交按钮。单击自定义组件事件：根据index来进行哦安短显示的是哪一个小栏目，以及下方标红的是哪一个小项。文本输入事件：给textarea定义一个事件，并且获取其value值就是所有输入的文本。选择图片事件与删除图片事件：在...

上一篇文章：微信小程序开发一个小型商城（七、支付页面）在上方还是使用wx:if进行判断是否有登录的数据，有的话将数据当中的图片和名字渲染到页面当中，不存在的话使用一个登录按钮表示需要用户登录。往下分别是一些静态标签，使用view和加上一些样式即可实现。在判断是否登录过的时候，在未登录的时候单击登录按钮后会实现跳转到login登录界面，获取用户授权进行登录，给获取登录全希望的按钮加上一个点击事...

上一篇：微信小程序开发一个小型商城（六、购物车页面）在这里，基本上是与购物车页面相似的：也不做过多解释，直接看代码 wxml<view class="user_info_row"> <view class="user_info"> <view>{{address.userName}}</view> <view>...

上一篇文章：微信小程序开发一个小型商城（五、商品详情）当我们在商品详情界面中点击添加购物后，会跳转到购物车界面，购物车界面是一个tabbar，在跳转的时候需要加上ope-type。看下购物车的静态页面把：如下图页面分析：在最上面需要获取收货地址：当存在则显示信息，不存在的时候显示一个按钮表示要用户授权。下面是类似与goodlist的一个个的小商品块，再下面就类似与goods_detail当中...

上一篇文章：微信小程序开发一个小型商城（四、商品列表）在从上一个界面跳转过来，会看到商品详情这个界面goods_detail ：如下图所示：页面分析：从上到下：一个轮播图+一个view标签存储商品名和价格等信息，再下面就是把数据渲染出来的图片，最后面就是几个按钮组成的一个绝对定位的view。轮播图组件轮播图组件在先前已经使用过了，在这里也就不做过多的介绍；轮播图，单击前往<vie...

上一篇文章，微信小程序开发一个小型商城（三、商品分类设计）在从上一个界面跳转过来，会看到商品列表这个界面：如下图所示：页面分析：从上到下：分别是一个已经定义好的自定义组件，下面的综合，销量，也是一个自定义组件。下面商品的一个个的小框框就是一个个的navigetor。自定义组件使用已经定义好了的组件。先在category/index/index.json文件引入组件，随后在wxml文件当中...

上一篇博文，微信小程序开发一个小型商城（二、首页设计）首先我们根据效果图再一一分解；可以看到在这个页面室友上方自定义组件搜索栏，左右俩边分别是一个scroll-view标签组成的。自定义组件使用已经定义好了的组件。先在category/index/index.json文件引入组件，随后在wxml文件当中直接调用组件即可。滚动view组件在一个view标签当中将其分为左右俩侧，均使用s...

首先在pages/index/index这一层层目录当中就是对首页进行编辑的地方，先看一下预览图：自定义组件在最上面的一个是自定义组件，一个搜索栏。在pages同层级新建一个complates文件夹，用于存放自定义组件，随后可以在微信开发者工具当中右键complates这个文件夹，选择新建SearchInput目录后，右键选择这个目录后选择新建complates就会看到在这个目录下会生成其对...

文章根据b站视频 零基础玩转微信小程序 教程（黑马）最开始我们需要在app.json文件当中声明所有使用到的界面。代码如下所示："pages": [ "pages/index/index", "pages/category/index", "pages/goods_list/index", "pages/goods_detail/main", "page...

在很多的地方需要这一功能，比如淘宝点击商品的轮播图或会放大这一张图片到全屏。这具体怎么实现呢？首先对轮播图绑定一个单击事件，并且给其一个参数，也就是当前图片的url值代码如下：<view class="detail_swiper"> <swiper autoplay circular indicator-dots interval="2000"> ...

easy less了在微信小程序当中一个less文件是比较常用的。css tree，这个可以根据自己的wxml文件生成对应的样式结构。wxml，这个是wxml格式化以及高亮组件(高度自定义)Prettier - Code formatter 一键整理代码格式。Chinese (Simplified) Language Pack for Visual Studio Code 将vscode...

在这里可以用到 iconfont 这个网站在首页–>图像库 -->搜索–>选择图标–>添加到购物车随后转到图标管理–>我的项目/我的图标–>font class–>打开下面的链接，把链接打开后出现的代码复制下来，用一个wxss文件进行保存，在其他的wxml文件当中通过class="icon-fenxiang" 这种方式即可进行获取...

在微信小程序当中当在上拉的时候要显示下一页的数据的时候就需要用到上拉刷新事件。首先要获取数据总条数以及一页有多少条数据，再使用Math的向上取整计算得出一共有多少页。以下代码为例：总页数/一页数据的量this.totalPages=Math.ceil(total/this.QueryParmams.pagesize);在这里之后获取的数据不再是直接覆盖而是要使用拼接：this.setDa...

在使用下拉刷新界面的时候，有以下几个步骤：重置数据数组.将当前页码设置为1.再次发送请求.关闭下拉刷新的窗口如下所示：首先在对于的json文件当中定义属性：表示允许刷新事件，并且将样式设置为黑色，"enablePullDownRefresh":true,"backgroundTextStyle":"dark"随后在js文件当中使用刷新这个事件：onPullDownRefre...

scroll-view标签表示的是一个可以滚动的view标签。支持很多属性，其中scroll-x和scroll-y是使用的比较多的：具体属性，参考微信开发文档下面使用一个简单的允许上下滚动的小实例：先在wxml文件当中使用view标签嵌套，在scroll-view标签里面就是可以滚动的标签，给scroll-view标签加上scroll-y属性，表示允许纵向滚动<view class=...

在使用微信小程序的时候当获取接口的数据的时候，接口传输过来的数据很大，而每一次回到这个页面又再一次的查询获取数据，这难免会拖垮小程序的速度。这个时候就需要使用本地存储。将数据存储到本地首先使用这一段代码对数据进行保存：第一个参数表示存储后的”文件名“，后面是一个字典类型的变量，现货区当前时间，再将获取的数据传给data表示存储，这个时候这一个文件当中就包含了time和data。 wx.set...

在微信小程序当中的app.json文件当中。是指下方的导航栏，在tabBar里面有一个list数组，在这个数组里面的值就是表示在下方导航栏的值。如下代码所示：（给出一个小的数组值） "list": [{ "pagePath": "pages/index/index", //表示对应的页面 "text": "首頁", //首页文字 "iconPat...

首先新建一个文件夹用于存放自定义组件，如components 再在这一个目录下新建一个目录Searchinput，再右键单击选择新建Components

应用生命周期App(Object object)注册小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。参考链接：https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html就是在app.js文件当中...

checkbox组件：复选框与radio单选框类似 ，需要搭配checkbox-group⼀起使⽤实现一个与radio相同的功能：首先在js文件当中定义两个数组，一个是复选框的对象list，表示可选的，一个空数组chaecklist表示选择后有哪些被选中的list: [ { id: 1, name:"苹果", value:"app...

radio组件该组件需要搭配radio-group⼀起使⽤radio组件：官网链接，单击跳转属性及说明如下表所示：属性类型说明valuestringradio 标识。当该radio 选中时，radio-group 的 change 事件会携带radio的valuecheckedboolean当前是否选中disabledboolean是否禁用...

rich-text组件就相当于一个将代码进行编译的组件，也就是富文本标签就很类似于python当中的BeautifulSoup库一样，如下代码所示：在js文件当中定义一个字符，字符的内容给定一段html代码 html:"<div>1</div><div>2</div><div>3</div><div>4&...

navigator组件类似于html当中的a标签，是实现页面跳转功能的一个组件属性如下表所示：属性名类型说明targetString在哪个⽬标上发⽣跳转，默认当前⼩程序，可选值 self/miniProgramurlString当前⼩程序内的跳转链接open-typeString跳转方式open-type有效值如下图所示：其中一下代码示...

image组件就相当于html当中的image标签。image组件默认宽度320px、⾼度240px属性如下表所示：Swiper组件实现图片轮播功能，如下图所示：

view组件代替了html的div标签：详情：单击跳转属性如下表：属性类型说明hover-classString指定按下去的样式类。当 hover-class="none" 时，没有点击态效果hover-stop-propagationboolean指定是否阻止本节点的祖先节点出现点击态hover-start-timenumber按住后多久出现点...

小程序中绑定事件，通过bind关键字来实现。wxml<input bindinput="handleInput" />pagePage({ // 绑定的事件 handleInput: function(e) { console.log(e); console.log("值被改变了"); } })...

首先看一下效果图：实现的功能及步骤：首先在wxml当中编辑好布局等。俩个input标签用于输入值。一个view用于给计算结果。首先对于input标签要绑定好一个方法，也就是将输入的数字实时同步。在js文件当中编辑：绑定的俩个方法相同，对原本的num和num1赋值，需要注意的是，在这是的e.detail.value获取的值要进行数据类型强制转换。handleInput(e) { th...

在运行微信小程序的时候出现下图错误：解决办法，在控制台当中输入openVendor() 会打开文件。如下图：删除圈中的文件，重启工具即可：

首先是if条件判断，如下代码段：先给出条件判断表达式，接上问号，第一个值是为true的结果，冒号后面是为false的结果<view>{{10%2==0?"偶数":"奇数"}}</view> <!--if条件判断-->再在js当中定义了一个list列表。在定义列表如下代码所示：给出一个简单的列表。 list:[ { id:0...

WXML是框架设计的⼀套标签语⾔，结合基础组件、事件系统，可以构建出⻚⾯的结构。在.js文件当中设置变量，包括数字，字符，逻辑，json，list等等。首先在文件的data里面可以设置一些变量，数字，字符等。 msg:"hello world", num:1000, xb:false如下图：表示文件。以及代码编辑的区域。js文件就是现在所编辑的。再者，在已经有变量之后...

在我们下载微信开发者工具后，打开工具，第一次需要扫码登录，登录后，如下图，选择新建一个小程序我的这个是新建了一个的了，点击加号新建，然后填入信息，项目名称，项目存储的地址，以及注册小程序时的APPID，再选择不使用云服务，语言选择默认的JavaScript看一下创建好了的小程序的所有文件夹下面的文件是什么。如下图：文件都看过了，接下来就是文件下面的内容了，首先是app.json 全局入...

首先，我们要去微信小程序当中去注册一个账号。在该网址中注册https://mp.weixin.qq.com/wxopen/waregister?action=step1 依次按流程填写好信息即可其次我们要使用一个开发工具，即微信提供的工具，网址https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html下载稳...