【微信小程序】6天精准入门（第1天：小程序入门）

ゞ浴缸里的玫瑰 2024-02-22 01:05 29阅读 0赞

## 一、介绍 ##

### 1、什么是小程序 ###

> **小程序是一种轻量级的应用程序**，可以在移动设备上运行，不需要用户下载和安装。它们通常由企业或开发者开发，用于提供特定功能或服务。
> 
> **微信小程序**（wei xin xiao cheng xu），简称小程序，英文名**Mini Program**，是一种不需要下载安装即可使用的应用( 张小龙对其的定义是无需安装，用完即走，实际上是需要安装的，只不过小程序的体积特别小， 下载速度很快，用户感觉不到下载的过程 )

### 2、小程序的作用 ###

> 小程序的作用很多。首先，它们提供了一种方便的方式，让用户能够直接在手机上访问特定的功能或服务，而不需要下载一个完整的应用程序。**小程序还可以帮助企业或开发者降低开发和维护应用程序的成本**，因为它们只需要在一个平台上进行开发，就可以在多个平台上运行。

### 3、小程序可以干什么 ###

> 小程序可以实现各种功能。例如，你可以使用小程序进行在线购物、预订餐厅、查看新闻、打开电子书、使用在线工具，甚至是玩游戏。小程序通常提供简单、直观的用户界面，使用户能够快速完成他们想要的任务。通过小程序，用户可以节省时间和精力，同时提供更加个性化的使用体验。
> 
> 1.  同App进行互补，提供同app类似的功能，比app操作更加简洁的轻应用
> 2.  通过扫一扫或者在微信搜索即可下载
> 3.  用户使用频率不高，但又不得不用的功能软件，目前看来小程序是首选
> 4.  连接线上线下
> 5.  开发门槛低， 成本低

## 二、小程序入门 ##

### 1、注册 ###

> 进入小程序官网[公众号 (qq.com)][_qq.com]

> 然后进入我们的注册界面按照提示步骤进行注册[注册页面][Link 1]

![b31b4e9392e94160b1be9a739dbc0804.png][]![ee0d24197fab4b6fb566733331e6dfde.png][]

![00f13f308bb644aa935d6be7ca33c5ad.png][]

### 2、登录 ###

> 进入我们的[小程序后台][Link 2]，找到我们的小程序ID，后续开发需要
> 
> ![d59976f4d8954fa38839cadacf7ca6e3.png][]

### 3、安装开发者工具 ###

> 进入官网的开发者下载页面[微信开发者工具下载地址与更新日志 | 微信开放文档 (qq.com)][_ _ _qq.com]，选择需要的版本进行下载安装。
> 
> 进去后进行登录创建，选择需要的功能进行开发。
> 
> 后端服务选择的事**微信云开发**是已经写好的一部分代码，可以直接运行的；选择的是**不使用云服务**则是自己编写代码。
> 
> ![d1587efe154d46d3b4bfabcd4bf6a6da.png][]

## 三、入门案例 ##

### 1、创建 ###

> 选择**不使用云服务**，选择**JavaScript-基础版本**，确定创建，等待创建（必须要联网），出现了你登陆的账号头像就说明创建成功了。

![d895953cb69b45c2bda5a4a5629178f7.png][]

![40ed5a3627124123bf659c01eba1ba14.png][]

### 2、目录结构 ###

<table style="width:500px;"> 
 <thead> 
  <tr> 
   <th>文件</th> 
   <th>必需</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>app.js</td> 
   <td>是</td> 
   <td>小程序逻辑</td> 
  </tr> 
  <tr> 
   <td>app.json</td> 
   <td>是</td> 
   <td>小程序公共配置</td> 
  </tr> 
  <tr> 
   <td>app.wxss</td> 
   <td>否</td> 
   <td>小程序公共样式表</td> 
  </tr> 
 </tbody> 
</table>

![e73e4b2528834a239b7f223ad6bfeed8.png][]

<table style="width:500px;">  四个文件组成  
 <thead> 
  <tr> 
   <th>文件类型</th> 
   <th>必需</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>js</td> 
   <td>是</td> 
   <td>页面逻辑</td> 
  </tr> 
  <tr> 
   <td>wxml</td> 
   <td>是</td> 
   <td>页面结构</td> 
  </tr> 
  <tr> 
   <td>json</td> 
   <td>否</td> 
   <td>页面配置</td> 
  </tr> 
  <tr> 
   <td>wxss</td> 
   <td>否</td> 
   <td>页面样式表</td> 
  </tr> 
 </tbody> 
</table>

**【注意】**为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名

> 这两个代码代表了谁在前面谁就是主页面

![079aa54debe845c3af3fc9cea94fd9ed.png][]

### 3、配置文件 ###

**app.json**

> 设置全局顶部背景样式

![066a69c7f0e343b095312460a2733ad7.png][]

> 如果我们想用不同的可以在对应的**json**文件里面进行配置
> 
> ![17de8aa25a134edca423319cc3c0e1be.png][]

![c53fb84e9f8d48e282aa80530f9494da.gif][]

### 4、创建文件 ###

> 添加你所需要的文件在在全局的**app.json**里面会**自动生成**。
> 
> ![acac050d8f024d60a941c0a1f10f2d7f.png][]

#### 4.1、json配置 ####

> 在生成的json文件里面进行页面的配置
> 
>     {
>       "usingComponents": {},
>       "navigationBarTitleText": "学生页面"
>     }
> 
> ![3a059247e52a46088eb23a5f8e0b56fe.png][]

#### 4.2、数据的传递及页面的布置 ####

> 如果页面不知道这么编写可以参考小程序的**wxml**文档[小程序简介 | 微信开放文档 (qq.com)][_ _ _qq.com 1]，数据用\{ \{\}\}来传递。
> 
>     <view class="container">
>       学生信息：{
>         {stuName}}
>     </view>
> 
> 在**js**里面的**data**里面定义一个**stuName**。
> 
>     data: {
>         stuName:'我真的会谢'
>       }
> 
> ![8955745f7d1148388cc12d78de12c5cb.png][]

#### 4.3、样式 ####

> 在**wxss**文件里面写好我们需要的样式
> 
>     /* pages/stu/stu.wxss */
>     .stuinfo{
>       font-size: 20px;
>       color: blue;
>     }
> 
> 在wxml里面用class属性调用
> 
>     <view class="container"  class="stuinfo">
>       学生信息：{
>         {stuName}}
>     </view>
> 
> ![b9f3bccaecd741f3ada90ab76671a522.png][]

#### 4.4、事件 ####

> 在**wxml**里面添加标签按钮
> 
>     
>     <view class="container" class="stuinfo">
>       学生信息：{
>         {stuName}}
>       <button bindtap="ondian">点击</button>
>     </view>
> 
> 在**js文件**里面写一个方法
> 
>     // 点击
>       ondian(){
>           console.log('点到我了');
>       }
> 
> ![313dc22a483b4069af7d5e1d136b11da.png][]

![7918aefc9fa94ad5b610b09b92732605.gif][]

分享就到这里感谢大家在评论区讨论！！！

[_qq.com]: https://mp.weixin.qq.com/cgi-bin/wx
[Link 1]: https://mp.weixin.qq.com/wxopen/waregister?action=step1&source=mpregister&token=&lang=zh_CN
[b31b4e9392e94160b1be9a739dbc0804.png]: https://img-blog.csdnimg.cn/b31b4e9392e94160b1be9a739dbc0804.png
[ee0d24197fab4b6fb566733331e6dfde.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/8d4cda520d114e1e9ac14ec82ba7b977.png
[00f13f308bb644aa935d6be7ca33c5ad.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/906ebdf9681b46f9bd1fa63c5e3fb61e.png
[Link 2]: https://mp.weixin.qq.com/wxamp/devprofile/get_profile?token=363582348&lang=zh_CN
[d59976f4d8954fa38839cadacf7ca6e3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/806799cfd94f454db2c57a7cf6e6c414.png
[_ _ _qq.com]: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
[d1587efe154d46d3b4bfabcd4bf6a6da.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/a6388bf74b10470e91fffa53ec3a078e.png
[d895953cb69b45c2bda5a4a5629178f7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/3576c8a81ac2458b98a19cfa2f831f39.png
[40ed5a3627124123bf659c01eba1ba14.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/5a7e197502454fc88d77156f78d920ce.png
[e73e4b2528834a239b7f223ad6bfeed8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/c789a31775ed4b7196348b9815dc86ce.png
[079aa54debe845c3af3fc9cea94fd9ed.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/c20f7b127fa24e5cab65d967c3045c10.png
[066a69c7f0e343b095312460a2733ad7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/08599f75903f42cfab354fa38fd3e87e.png
[17de8aa25a134edca423319cc3c0e1be.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/1499c765dd5042bfa3644a8fbfbe1ef5.png
[c53fb84e9f8d48e282aa80530f9494da.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/ee682b19a04541e9929b5c55f889388c.png
[acac050d8f024d60a941c0a1f10f2d7f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/48bbdb8be7a44b938a4ff2048af96926.png
[3a059247e52a46088eb23a5f8e0b56fe.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/69a63fda84964c5abc50c3d9e2330255.png
[_ _ _qq.com 1]: https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/code.html#WXML-%E6%A8%A1%E6%9D%BF
[8955745f7d1148388cc12d78de12c5cb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/1ab2f16dd49d4d79bbd6b47ee52c4477.png
[b9f3bccaecd741f3ada90ab76671a522.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/a91386a858c24ff88319865a758a3d7f.png
[313dc22a483b4069af7d5e1d136b11da.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/27aab172777a473990f55942456bbeff.png
[7918aefc9fa94ad5b610b09b92732605.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/f41acbf3c67e4403bdcdab6030484a1a.png