探索小程序的世界(专栏导读、基础理论)

忘是亡心i 2023-10-13 10:56 10阅读 0赞

![d00e22b20125405390e90b3fcca18420.png][]

### 文章导读 ###

*  一、为什么要学习小程序开发
 *   *  1.1 低门槛
     *  1.2 市场需求
     *  1.3 创业机会
     *  1.4 技术发展趋势
 *  二、专栏导读
 *   *  2.1 实战系列
     *  2.2 工具系列
     *  2.3 游戏系列
     *  2.4 插件系列
 *  三、基础理论
 *   *  3.1 微信小程序
     *   *  简易教程
         *   *  框架
             *  组件
             *  API
             *  工具
         *  开发者工具
         *  项目结构
     *  3.2 app.json配置
     *   *  pages
         *  window
         *  tabbar
     *  3.3 App.js
     *   *  onLaunch
         *  onShow
         *  onHide
         *  onError
         *  注意事项
     *  3.4 页面跳转与传参
     *  3.5 小程序JS与普通JS的差异
     *   *  小程序不是运行在浏览器中，所以没有DOM和BOM对象
         *  小程序的JS有一些额外的成员
         *  小程序的JS是支持CommonJS规范的
     *  3.6 界面层的数据绑定
     *   *  特点
         *  使用
         *  运算

# 一、为什么要学习小程序开发 #

> 由于微信自身的强势社交属性，以及其对小程序的战略定位（连接人与服务）的前提下进行了持续的大力支持，截至2021年6月，微信官方宣布已经有超过300万个微信小程序。这个数字在不断增长，因为越来越多的开发者和企业选择在微信平台上开发和发布小程序。

## 1.1 低门槛 ##

> 相比于传统的App开发，小程序开发门槛较低。你可以使用HTML、CSS和JavaScript等前端技术来开发小程序，而无需学习复杂的移动开发框架和语言。这使得学习小程序开发更加容易上手。

## 1.2 市场需求 ##

> 小程序是近年来兴起的一种应用形式，受到了广大用户的喜爱。许多企业和个人都在寻求开发小程序来满足用户需求，因此学习小程序开发将增加你的就业机会和市场竞争力。

![在这里插入图片描述][f3b83ef77f504fcda3329703236ff6cd.png]

## 1.3 创业机会 ##

> 小程序开发为创业者提供了一个低成本、快速验证创意的平台。你可以通过开发小程序来验证你的商业模式和产品想法，从而降低创业风险。

## 1.4 技术发展趋势 ##

> 小程序作为一种新兴的应用形式，具有很大的发展潜力。随着技术的不断进步和用户需求的不断变化，小程序开发领域将会有更多的机会和挑战。学习小程序开发可以让你跟上技术发展的潮流，并为未来的发展做好准备。

# 二、专栏导读 #

[微信小程序专栏地址点此访问][Link 1]  
![在这里插入图片描述][c1729dc7c3114d1ca62d4721751c0e41.png]

## 2.1 实战系列 ##

*  [基于Java+SpringBoot制作一个校园圈子小程序][Java_SpringBoot]
 *  [基于Java+SpringBoot制作一个宿舍报修小程序][Java_SpringBoot 1]
 *  [基于小程序制作一个ChatGPT聊天机器人][ChatGPT]
 *  [基于Java+SpringBoot+微信小程序实现奶茶点单系统][Java_SpringBoot 2]
 *  [微信小程序完整项目实战(前端+后端)][Link 2]
 *  [基于小程序+云开发制作一个文件传输助手小程序][Link 3]
 *  [基于JavaSpringBoot+uniapp制作一个记账小程序][JavaSpringBoot_uniapp]
 *  [基于Java+SpringBoot制作一个论坛小程序][Java_SpringBoot 3]
 *  [基于微信小程序+爬虫制作一个表情包小程序][Link 4]
 *  [基于小程序+C\#制作一个打卡小程序][C]
 *  [基于小程序+云开发制作一个菜谱小程序][Link 5]
 *  [基于小程序+云开发制作一个租房小程序][Link 6]
 *  [基于Java+SpringBoot制作一个考试答题小程序][Java_SpringBoot 4]
 *  [基于Java+SpringBoot制作一个旅游攻略小程序][Java_SpringBoot 5]
 *  [基于小程序制作一个超酷的个人简历][Link 7]
 *  [使用小程序制作一个节日祝福生成器][Link 8]
 *  [使用小程序制作一个时间管理小工具][Link 9]
 *  [基于小程序+C\#制作一个聊天系统][C 1]
 *  [基于小程序+C\#制作一个小说阅读器][C 2]
 *  [使用小程序制作一个音乐播放器][Link 10]
 *  [使用小程序制作一个核酸检测点查询工具][Link 11]
 *  [基于小程序实现打卡功能][Link 12]
 *  [基于小程序+C\#实现聊天功能][C 3]
 *  [从零开始,开发一个电商微信小程序\[前端+后端(c\#)\]][c]
 *  [微信小程序电子签名及图片生成][Link 13]
 *  [基于Java+SpringBoot制作一个社区宠物登记小程序][Java_SpringBoot 6]
 *  [基于Java+SpringBoot制作一个学生公寓管理小程序][Java_SpringBoot 7]
 *  [基于Java+SpringBoot制作一个智能用电小程序][Java_SpringBoot 8]

## 2.2 工具系列 ##

*  [使用小程序制作一个马赛克处理工具][Link 14]
 *  [使用小程序制作一个世界杯球员识别工具][Link 15]
 *  [使用小程序实现AI动漫脸特效][AI]
 *  [使用小程序制作一个老照片修复工具，让追忆时光触手可及][Link 16]
 *  [基于小程序实现人脸数量检测][Link 17]
 *  [小程序实现文字情绪识别并生成参考回复][Link 18]
 *  [基于小程序实现人脸识别对比][Link 19]
 *  [基于小程序实现发送语音消息及转文字][Link 20]
 *  [使用小程序+C\#实现人脸、手势双重识别认证][C 4]
 *  [基于小程序实现透明背景人像分割][Link 21]
 *  [用微信小程序给头像带上小旗帜][Link 22]
 *  [一文读懂基于小程序的图像识别][Link 23]

## 2.3 游戏系列 ##

*  [飞翔的圣诞老人][Link 24]
 *  [使用小程序制作一个足球拼图小游戏][Link 25]
 *  [使用小程序制作一个2048小游戏][2048]
 *  [使用小程序制作一个飞机大战小游戏][Link 26]
 *  [使用小程序制作一个电子木鱼，功德+1][1]
 *  [基于小程序制作一个猜拳小游戏][Link 27]

## 2.4 插件系列 ##

*  [使用小程序+网页简易实现多客户端实时弹幕][Link 28]
 *  [使用小程序实现图表(圆饼图、柱状图、折线图)][Link 29]
 *  [小程序自定义底部导航栏][Link 30]
 *  [使用小程序实现侧滑抽屉菜单特效][Link 31]
 *  [使用小程序实现通讯录功能，首字母快捷导航][Link 32]
 *  [小程序实现瀑布流布局的几种方式][Link 33]
 *  [微信小程序实现秒杀、拼团、团购等效果][Link 34]
 *  [小程序实现滑动删除][Link 35]
 *  [微信小程序实现进度条][Link 36]
 *  [微信小程序实现自定义弹窗组件][Link 37]
 *  [微信小程序实现步骤条][Link 38]
 *  [小程序实现图片上传、数量配置、预览、删除功能][Link 39]

# 三、基础理论 #

## 3.1 微信小程序 ##

### 简易教程 ###

#### 框架 ####

> 框架提供了白己的视图层描述语言 WXML和 WXSS，以及基于JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，可以让开发者更加方便的聚焦于数据与逻辑上。

#### 组件 ####

> 框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发，注意，所有组件与属性都是小写，以连字符-连接。

*  组件是视图层的基本组成单元。
 *  组件自带一些功能与微信风格的样式。
 *  一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。

#### API ####

> 框架提供丰富的微信原生API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。

#### 工具 ####

> 集成了开发调试、代码逻辑及程序发布等功能的官方开发者工具。

### 开发者工具 ###

<table> 
 <thead> 
  <tr> 
   <th>功能</th> 
   <th>介绍</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>编辑</td> 
   <td>默认为编辑状态显示，下面的编译为手动编译功能，遇常情况下修改文件后保存会刷新界面显示</td> 
  </tr> 
  <tr> 
   <td>调试</td> 
   <td>编辑状态的菜单栏与浏览器的调试界面几乎相同，包括控制台、源码、网络等</td> 
  </tr> 
  <tr> 
   <td>编译</td> 
   <td>修改代码之后，如果没有设置自动检测制新可以在这里手动重新编译</td> 
  </tr> 
  <tr> 
   <td>后台</td> 
   <td>模拟程序运行到后台，进入后台时再次点击会进入前台执行</td> 
  </tr> 
  <tr> 
   <td>缓存</td> 
   <td>数据的本地缓存，可以进行清除缓存等操作</td> 
  </tr> 
 </tbody> 
</table>

### 项目结构 ###

<table> 
 <thead> 
  <tr> 
   <th>文件名</th> 
   <th>介绍</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>utils</td> 
   <td>公共脚本目录</td> 
  </tr> 
  <tr> 
   <td>app.js</td> 
   <td>小程序逻辑</td> 
  </tr> 
  <tr> 
   <td>app.json</td> 
   <td>全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、tab等</td> 
  </tr> 
  <tr> 
   <td>app.wxss</td> 
   <td>小程序公共样式表</td> 
  </tr> 
  <tr> 
   <td>pages</td> 
   <td>页面文件组成</td> 
  </tr> 
 </tbody> 
</table>

## 3.2 app.json配置 ##

### pages ###

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th>功能</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>功能</td> 
   <td>设置页面路径</td> 
  </tr> 
  <tr> 
   <td>节点</td> 
   <td>“pages”:[]</td> 
  </tr> 
  <tr> 
   <td>类型</td> 
   <td>String Array</td> 
  </tr> 
  <tr> 
   <td>必填</td> 
   <td>是</td> 
  </tr> 
 </tbody> 
</table>

### window ###

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th>功能</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>功能</td> 
   <td>设置默认页面的窗口表现</td> 
  </tr> 
  <tr> 
   <td>节点</td> 
   <td>backgroundTextStyle、navigationBarBackgroundColor、navigationBarTitleText、navigationBarTextStyle</td> 
  </tr> 
  <tr> 
   <td>类型</td> 
   <td>object</td> 
  </tr> 
  <tr> 
   <td>必填</td> 
   <td>否</td> 
  </tr> 
 </tbody> 
</table>

### tabbar ###

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th>功能</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>功能</td> 
   <td>设置底部tab的表现</td> 
  </tr> 
  <tr> 
   <td>节点</td> 
   <td>color、selectedcolor、backgroundColor、borderStyle</td> 
  </tr> 
  <tr> 
   <td>类型</td> 
   <td>object</td> 
  </tr> 
  <tr> 
   <td>必填</td> 
   <td>否</td> 
  </tr> 
 </tbody> 
</table>

## 3.3 App.js ##

> App0 函数用来注册一个小程序，接受一个 object 参数，其指定小程序的生命周期函数等

### onLaunch ###

> 描述：生命周期函数，监听小程序初始化  
> 触发时机：当小程序初始化完成时，会触发onLaunch（全局只触发一次）

### onShow ###

> 描述：生命周期函数，监听小程序显示  
> 触发时机：当小程序启动，或从后台进入前台显示，会触发 onShow

### onHide ###

> 描述：生命周期函数，监听小程序隐藏  
> 触发时机：当小程序从前台进入后台，会触发 onHide

### onError ###

> 描述：错误监听函数  
> 触发时机：当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息

### 注意事项 ###

*  App() 必须在 app;js 中注册，且不能注册多个
 *  不要在定义于 App() 内的函数中调用 getApp()，使用 this 就可以拿到 app 实例
 *  不要在 onLaunch 的时候调用 getCurrentPage()，此时 page 还没有生成
 *  通过 getApp()获取实例之后，不要私自调用生命周期函数

## 3.4 页面跳转与传参 ##

> navigator标签，相当于html中的a标签，默认跳转过去在导航栏中会出现一个返回按钮，如果不用返回，可以添加属性redirect，url的用法和htm中a标签的href一样，用?待参数，用&带多个参数

![在这里插入图片描述][44f81098b2aa4d6e8f37082d7ab298ab.png]

> 跳转的页面的js页面中的onLoad函数的参数options就是传过来的参数了

![在这里插入图片描述][2261773b6d2d4374b0803b4818b63f56.png]  
![在这里插入图片描述][5092cd58b8c941f5974c627bd5158f64.png]

> 导航元素高亮小技巧

*  hover-class属性的使用
 *  要使普通元素点击的时候有高亮的效果，可以给元素添加cursor:pointer的样式

## 3.5 小程序JS与普通JS的差异 ##

### 小程序不是运行在浏览器中，所以没有DOM和BOM对象 ###

*  console.log(window)结果为undifined
 *  console.log(document)结果为undifined
 *  没有alert方法

### 小程序的JS有一些额外的成员 ###

*  App方法=》用于定义应用程序实例对象
 *  Page方法=》用于定义页面对象
 *  getApp方法=》用来获取全局应用程序对象
 *  getCurrentPages方法=》用来获取当前页面的调用栈( 最后一个就是当前页面 )
 *  wx对象=》用来提供API的核心库

### 小程序的JS是支持CommonJS规范的 ###

*  module.exports
 *  require(./moduleA)

## 3.6 界面层的数据绑定 ##

### 特点 ###

> WXML 中的动态数据均来白对应 Page 的 data。也就是说js与页面，js中函数函数的值传递都可以通过data中的定义数据来传值。

### 使用 ###

> 数据绑定使用 Mustache语法( 双大括号 ) 将变量包起来

<table> 
 <thead> 
  <tr> 
   <th>介绍</th> 
   <th>语法</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>内容</td> 
   <td><code>&lt;view&gt; {( message )) &lt;/view&gt;</code></td> 
  </tr> 
  <tr> 
   <td>组件属性(需要在双引号之内)</td> 
   <td><code>&lt;view id="item-fid]}"&gt; &lt;/view&gt;</code></td> 
  </tr> 
  <tr> 
   <td>控制属性(需要在双引号之内)</td> 
   <td><code>&lt;view wx:if="[[condition)&gt; &lt;/view&gt;</code></td> 
  </tr> 
  <tr> 
   <td>关键字(需要在双引号之内)</td> 
   <td><code>&lt;checkbox checked="{ {false}}"&gt; &lt;/checkbox&gt;</code></td> 
  </tr> 
 </tbody> 
</table>

### 运算 ###

> 可以在\{ \{\}\}内进行简单的运算

<table> 
 <thead> 
  <tr> 
   <th>介绍</th> 
   <th>语法</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>三元运算</td> 
   <td><code>&lt;view hidden="{ {flag ? true : false}}"&gt; Hidden &lt; /view&gt;</code></td> 
  </tr> 
  <tr> 
   <td>算数运算</td> 
   <td><code>&lt;view&gt; { {a + b}} + { {c}} + d &lt;/view&gt;</code></td> 
  </tr> 
  <tr> 
   <td>逻辑判断</td> 
   <td><code>&lt;view wx:if="{length &gt; 5}}&gt; &lt;/view&gt;</code></td> 
  </tr> 
  <tr> 
   <td>字符串运算</td> 
   <td><code>&lt;view&gt;{ {"hello"+ name}}&lt;/view&gt;</code></td> 
  </tr> 
  <tr> 
   <td>数据路径运算</td> 
   <td><code>&lt;view&gt;{ {object.key}} { {farray[0]}}&lt;/view&gt;</code></td> 
  </tr> 
 </tbody> 
</table>

[d00e22b20125405390e90b3fcca18420.png]: https://img-blog.csdnimg.cn/d00e22b20125405390e90b3fcca18420.png
[f3b83ef77f504fcda3329703236ff6cd.png]: https://img-blog.csdnimg.cn/f3b83ef77f504fcda3329703236ff6cd.png
[Link 1]: https://blog.csdn.net/weixin_42794881/category_10483785.html
[c1729dc7c3114d1ca62d4721751c0e41.png]: https://img-blog.csdnimg.cn/c1729dc7c3114d1ca62d4721751c0e41.png
[Java_SpringBoot]: https://blog.csdn.net/weixin_42794881/article/details/131087693
[Java_SpringBoot 1]: https://blog.csdn.net/weixin_42794881/article/details/130200051
[ChatGPT]: https://blog.csdn.net/weixin_42794881/article/details/130055968
[Java_SpringBoot 2]: https://blog.csdn.net/weixin_42794881/article/details/129839040
[Link 2]: https://blog.csdn.net/weixin_42794881/article/details/125349975
[Link 3]: https://blog.csdn.net/weixin_42794881/article/details/131422065
[JavaSpringBoot_uniapp]: https://blog.csdn.net/weixin_42794881/article/details/130890287
[Java_SpringBoot 3]: https://blog.csdn.net/weixin_42794881/article/details/130720819
[Link 4]: https://blog.csdn.net/weixin_42794881/article/details/129710348
[C]: https://blog.csdn.net/weixin_42794881/article/details/129559541
[Link 5]: https://blog.csdn.net/weixin_42794881/article/details/129387529
[Link 6]: https://blog.csdn.net/weixin_42794881/article/details/129303882
[Java_SpringBoot 4]: https://blog.csdn.net/weixin_42794881/article/details/129211236
[Java_SpringBoot 5]: https://blog.csdn.net/weixin_42794881/article/details/129096854
[Link 7]: https://blog.csdn.net/weixin_42794881/article/details/129050461
[Link 8]: https://blog.csdn.net/weixin_42794881/article/details/128465745
[Link 9]: https://blog.csdn.net/weixin_42794881/article/details/128305826
[C 1]: https://blog.csdn.net/weixin_42794881/article/details/128293197
[C 2]: https://blog.csdn.net/weixin_42794881/article/details/128114786
[Link 10]: https://blog.csdn.net/weixin_42794881/article/details/127808251
[Link 11]: https://blog.csdn.net/weixin_42794881/article/details/127457495
[Link 12]: https://blog.csdn.net/weixin_42794881/article/details/127270238
[C 3]: https://blog.csdn.net/weixin_42794881/article/details/127225377
[c]: https://blog.csdn.net/weixin_42794881/article/details/109178368
[Link 13]: https://blog.csdn.net/weixin_42794881/article/details/126555434
[Java_SpringBoot 6]: https://blog.csdn.net/weixin_42794881/article/details/131701125
[Java_SpringBoot 7]: https://blog.csdn.net/weixin_42794881/article/details/132030096
[Java_SpringBoot 8]: https://blog.csdn.net/weixin_42794881/article/details/132160716
[Link 14]: https://blog.csdn.net/weixin_42794881/article/details/128220609
[Link 15]: https://blog.csdn.net/weixin_42794881/article/details/128150463
[AI]: https://blog.csdn.net/weixin_42794881/article/details/128075295
[Link 16]: https://blog.csdn.net/weixin_42794881/article/details/127755250
[Link 17]: https://blog.csdn.net/weixin_42794881/article/details/127672071
[Link 18]: https://blog.csdn.net/weixin_42794881/article/details/127396189
[Link 19]: https://blog.csdn.net/weixin_42794881/article/details/127296711
[Link 20]: https://blog.csdn.net/weixin_42794881/article/details/127628170
[C 4]: https://blog.csdn.net/weixin_42794881/article/details/127496959
[Link 21]: https://blog.csdn.net/weixin_42794881/article/details/127198801
[Link 22]: https://blog.csdn.net/weixin_42794881/article/details/127123508
[Link 23]: https://blog.csdn.net/weixin_42794881/article/details/126997238
[Link 24]: https://blog.csdn.net/weixin_42794881/article/details/128413910
[Link 25]: https://blog.csdn.net/weixin_42794881/article/details/128239067
[2048]: https://blog.csdn.net/weixin_42794881/article/details/127959800
[Link 26]: https://blog.csdn.net/weixin_42794881/article/details/127897912
[1]: https://blog.csdn.net/weixin_42794881/article/details/127849026
[Link 27]: https://blog.csdn.net/weixin_42794881/article/details/127788653
[Link 28]: https://blog.csdn.net/weixin_42794881/article/details/128755248
[Link 29]: https://blog.csdn.net/weixin_42794881/article/details/127319786
[Link 30]: https://blog.csdn.net/weixin_42794881/article/details/127118008
[Link 31]: https://blog.csdn.net/weixin_42794881/article/details/127054827
[Link 32]: https://blog.csdn.net/weixin_42794881/article/details/127053122
[Link 33]: https://blog.csdn.net/weixin_42794881/article/details/126946430
[Link 34]: https://blog.csdn.net/weixin_42794881/article/details/125722297
[Link 35]: https://blog.csdn.net/weixin_42794881/article/details/109156087
[Link 36]: https://blog.csdn.net/weixin_42794881/article/details/131995994
[Link 37]: https://blog.csdn.net/weixin_42794881/article/details/132304568
[Link 38]: https://blog.csdn.net/weixin_42794881/article/details/132491271
[Link 39]: https://blog.csdn.net/weixin_42794881/article/details/132603414
[44f81098b2aa4d6e8f37082d7ab298ab.png]: https://img-blog.csdnimg.cn/44f81098b2aa4d6e8f37082d7ab298ab.png
[2261773b6d2d4374b0803b4818b63f56.png]: https://img-blog.csdnimg.cn/2261773b6d2d4374b0803b4818b63f56.png
[5092cd58b8c941f5974c627bd5158f64.png]: https://img-blog.csdnimg.cn/5092cd58b8c941f5974c627bd5158f64.png