创造你的第一个微信小程序：简单易懂的入门指南

亦凉 2024-04-17 09:57 16阅读 0赞

#### 微信小程序开发 ####

*   *  1. 微信小程序开发
     *   *  1.1 介绍
         *  1.2 准备工作
         *  1.3 入门案例
         *   *  1.3.1 小程序目录结构
             *  1.3.2 编写和编译小程序
             *  1.3.3 发布小程序

### 1. 微信小程序开发 ###

#### 1.1 介绍 ####

小程序是一种新的开放能力，开发者可以快速地开发一个小程序。可以在微信内被便捷地获取和传播，同时具有出色的使用体验。  
![在这里插入图片描述][591b8e16ecd14a5b8b0de403eb130df2.png]

**官方网址**：[https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh\_CN][https_mp.weixin.qq.com_cgi-bin_wx_token_lang_zh_CN]

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

小程序主要运行微信内部，可通过上述网站来整体了解微信小程序的开发。

**首先**，在进行小程序开发时，需要先去注册一个小程序，在注册的时候，它实际上又分成了不同的注册的主体。我们可以以个人的身份来注册一个小程序，当然，也可以以企业政府、媒体或者其他组织的方式来注册小程序。那么，不同的主体注册小程序，最终开放的权限也是不一样的。比如以个人身份来注册小程序，是无法开通支付权限的。若要提供支付功能，必须是企业、政府或者其它组织等。所以，不同的主体注册小程序后，可开发的功能是不一样的。

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

**然后**，微信小程序我们提供的一些开发的支持，实际上微信的官方是提供了一系列的工具来帮助开发者快速的接入  
并且完成小程序的开发，提供了完善的开发文档，并且专门提供了一个开发者工具，还提供了相应的设计指南，同时也提供了一些小程序体验DEMO，可以快速的体验小程序实现的功能。

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

**最后**，开发完一个小程序要上线，也给我们提供了详细地接入流程。

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

#### 1.2 准备工作 ####

开发微信小程序之前需要做如下准备工作：

*  注册小程序
 *  完善小程序信息
 *  下载开发者工具

**1). 注册小程序**

注册地址：https://mp.weixin.qq.com/wxopen/waregister?action=step1

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

**2). 完善小程序信息**

登录小程序后台：https://mp.weixin.qq.com/

两种登录方式选其一即可

![在这里插入图片描述][2cc37ea6ed344d9e86437cb81dd3d061.png]  
![在这里插入图片描述][dc384b1ada974291aaa52b3e3199440e.png]

完善小程序信息、小程序类目

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

查看小程序的 AppID

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

**3). 下载开发者工具**

下载地址： [https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html][https_developers.weixin.qq.com_miniprogram_dev_devtools_stable.html]

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

扫描登录开发者工具

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

创建小程序项目

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

熟悉开发者工具布局

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

设置不校验合法域名

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

**注**：开发阶段，小程序发出请求到后端的Tomcat服务器，若不勾选，请求发送失败。

#### 1.3 入门案例 ####

##### 1.3.1 小程序目录结构 #####

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

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

**文件说明：**

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

**app.js**：必须存在，主要存放小程序的逻辑代码

**app.json**：必须存在，小程序配置文件，主要存放小程序的公共配置

**app.wxss:** 非必须存在，主要存放小程序公共样式表，类似于前端的CSS样式

对小程序主体三个文件了解后，其实一个小程序又有多个页面。比如说，有商品浏览页面、购物车的页面、订单支付的页面、商品的详情页面等等。那这些页面会放在哪呢？  
会存放在pages目录。

每个小程序页面主要由四个文件组成：

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

**文件说明：**

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

**js文件**：必须存在，存放页面业务逻辑代码，编写的js代码。

**wxml文件**：必须存在，存放页面结构，主要是做页面布局，页面效果展示的，类似于HTML页面。

**json文件**：非必须，存放页面相关的配置。

**wxss文件**：非必须，存放页面样式表，相当于CSS文件。

##### 1.3.2 编写和编译小程序 #####

**1). 编写**

进入到index.wxml，编写页面布局

<view class="container">
      <view>{
       {msg}}</view>
       <view>
        <button type="default" bindtap="getUserInfo">获取用户信息</button>
        <image style="width: 100px;height: 100px;" src="{
         {avatarUrl}}"></image>
        {
       {nickName}}
      </view>
       <view>
        <button type="primary" bindtap="wxlogin">微信登录</button>
        授权码：{
       {code}}
      </view>
       <view>
        <button type="warn" bindtap="sendRequest">发送请求</button>
        响应结果：{
       {result}}
      </view>
    </view>

进入到index.js，编写业务逻辑代码

Page({
        
      data:{
        
        msg:'hello world',
        avatarUrl:'',
        nickName:'',
        code:'',
        result:''
      },
      getUserInfo:function(){
        
        wx.getUserProfile({
        
          desc: '获取用户信息',
          success:(res) => {
        
            console.log(res)
            this.setData({
        
              avatarUrl:res.userInfo.avatarUrl,
              nickName:res.userInfo.nickName
            })
          }
        })
      },
      wxlogin:function(){
        
        wx.login({
        
          success: (res) => {
        
            console.log("授权码："+res.code)
            this.setData({
        
              code:res.code
            })
          }
        })
      },
      sendRequest:function(){
        
        wx.request({
        
          url: 'http://localhost:8080/user/shop/status',
          method:'GET',
          success:(res) => {
        
            console.log("响应结果：" + res.data.data)
            this.setData({
        
              result:res.data.data
            })
          }
        })
      }})

**2). 编译**

点击编译按钮

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

**3). 运行效果**

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

点击**获取用户信息**

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

点击**微信登录**

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

点击**发送请求**

因为请求http://localhost:8080/user/shop/status，先要启动后台项目。

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

**注**：设置不校验合法域名，若不勾选，请求发送失败。

##### 1.3.3 发布小程序 #####

小程序的代码都已经开发完毕，要将小程序发布上线，让所有的用户都能使用到这个小程序。

点击上传按钮：

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

指定版本号：

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

上传成功：

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

把代码上传到微信服务器就表示小程序已经发布了吗？  
**其实并不是**。当前小程序版本只是一个开发版本。

进到微信公众平台，打开版本管理页面。

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

需提交审核，变成审核版本，审核通过后，进行发布，变成线上版本。

一旦成为线上版本，这就说明小程序就已经发布上线了，微信用户就可以在微信里面去搜索和使用这个小程序了。

**后记  
????美好的一天，到此结束，下次继续努力！欲知后续，请看下回分解，写作不易，感谢大家的支持！！ ???**

[591b8e16ecd14a5b8b0de403eb130df2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/f4ca989b717040b88b443bafd227cef6.png
[https_mp.weixin.qq.com_cgi-bin_wx_token_lang_zh_CN]: https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN
[8f37ba13a8874c51832d2c9cae83c3e2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/df731c11102c4accbe7d578f6bb023fc.png
[639b642f63874b99acb37a9535c5a238.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/fde3be6f3ca74a73aa9d9bdd26afb60a.png
[b5972c706e2e4e28a32fcbbda5df7041.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/e4ddb8f1d5844048852e69558500a0e6.png
[39b9b182b1a4426aae6b301360fa0c04.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/088e84012d494dc6b4f3c1b2b2c0925c.png
[e58543013caf405ea1a724adc8c4cad1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/fc206b20702b47fb89d1758bbfb7d639.png
[2cc37ea6ed344d9e86437cb81dd3d061.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/1176a1cee67a485aa4dd9c5c3b5773cf.png
[dc384b1ada974291aaa52b3e3199440e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/92badb2c69504bf4961b738f8ab71a00.png
[1dcdef86220c47ed80086c97bebea6e4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/ade4d5f255794777b22438a659a1588d.png
[2eb47ba93f964bf09478be76901cfdfa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/0feba85f3ba0486cbf1764ef96c43173.png
[https_developers.weixin.qq.com_miniprogram_dev_devtools_stable.html]: https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html
[486bbd024acd4d8ca7df97e3dac5f5cb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/dd528fa63d5b418885648047f2e75e5e.png
[813faa4bf286417e9a8dc0f35958f38e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/81707fb9c4b0485fbfb5e8e7a87891d5.png
[5aed1c53000a4512ad51019b9ce5e394.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/fac2e53cdd1141529715e56142214c00.png
[848ea6ce046f4af08c6a26549b96e868.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/5ad4f1c4f1db403486989ad48c3cf9a6.png
[caa2f5a835c3449f8da758853aefb006.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/845ce5fe5ab7453396a9d23d80936eb2.png
[e8dbd2458a624f559823bb2acbf68835.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/7637bf39ff0045b4817a31a9d6406028.png
[5781c4984d4d4517936b4495f9d43f9e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/3932eb224ef64d2ab9fac97e369230f0.png
[98c2e7ab6a7a4d5eb0faa9aa5dafc3c5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/963a9f21793f4ea48afdd83929af9e6f.png
[254b55dd3cbf4667a55793b6ca3860df.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/cb209ed130774a66ace04b4781535005.png
[5f833f27c8374b88bce811791036fc51.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/a49a9430166a4c40a9a6b364d23cacd9.png
[e3ad6bd9bb1a4199b2fe7c26d6553728.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/85ab9e5c2524440b94a7df89e86663cd.png
[b4719126b8714f02b08b82eac26c4b64.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/064d63954a01497dbeeacf64a7fa1577.png
[4250cc6d7b7645bca8603e573398c7a4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/101c878e7b414b45b94daf87ced40eb2.png
[e975739ef2154244ade3d6a3dcb75a6e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/a2d5661d61184962967cc70862c4625d.png
[cb2fe1fc726e498992a12d05611e2fcc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/1c22d9fba76241918f2edd358c13e918.png
[a51634af77754cd7950dc4f8b9b891ca.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/2a70e594f2864a79bb93137105c6176c.png
[147c0e7d7791467cb2f6352c8b627238.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/a2308cc7959a4dedb863e040bedfee3b.png
[aeca3ba1dfeb4d419f06dcaef9c02da6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/b790b886a2e64a088acb4573b75669f0.png