【零基础微信小程序入门开发一】小程序介绍及环境搭建

淡淡的烟草味﹌ 2023-09-28 10:20 13阅读 0赞

### 什么是小程序？ ###

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

微信小程序，小程序的一种，英文名Wechat Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。  
全面开放申请后，主体类型为企业、政府、媒体、其他组织或个人的开发者，均可申请注册小程序。微信小程序、微信订阅号、微信服务号、微信企业号是并行的体系。  
微信小程序是一种不用下载就能使用的应用，也是一项创新，经过将近两年的发展，已经构造了新的微信小程序开发环境和开发者生态。微信小程序也是这么多年来中国IT行业里一个真正能够影响到普通程序员的创新成果，已经有超过150万的开发者加入到了微信小程序的开发，与我们一起共同发力推动微信小程序的发展，微信小程序应用数量超过了一百万，覆盖200多个细分的行业，日活用户达到两个亿，微信小程序还在许多城市实现了支持地铁、公交服务。微信小程序发展带来更多的就业机会，2017年小程序带动就业104万人，社会效应不断提升。

### 如何注册小程序 ###

[申请地址][Link 1]

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

如果你还没有小程序账号的话点击右上角申请“注册-小程序即可>”  
![在这里插入图片描述][6dfe0a19f67240d3b9ec7b91b8574cb5.png]

### 一些注意事项及说明 ###

个人号：小程序为个人的不支持支付能力，像社区论坛的类目就必须面向企业开放，个人号注册后就无法转向企业号

企业号：需要支付300元的认证费用，也可以选择第三方认证，完成认证之后解绑，效果一样

### 开发工具下载 ###

我们打开[文档工具][Link 2]  
![在这里插入图片描述][df8c420917214939a7630a967961af87.png]  
选择下载稳定版，根据自己的电脑配置下载即可

安装后如图所示  
![在这里插入图片描述][e52ff5cd3cc34c7cb1eb262676c4abcb.png]

### 介绍WXMI、JS、WXSS ###

我们打开 开发者工具，新建一个官方模板  
![在这里插入图片描述][9fd52cf339c54c5f9fef9eba1ed0ccba.png]  
打开后如下图：  
![在这里插入图片描述][b7747346cdfd4ddf89592772405f6961.png]

### 编写第一个程序 ###

打开/pages/index.wxml文件  
![在这里插入图片描述][94c9cbf2412947c79adbf5970baf6c25.png]  
在[小程序开发者工具文档中][Link 3]我们可以看到小程序的一些基础控件

<table> 
 <thead> 
  <tr> 
   <th>控件名称</th> 
   <th>介绍</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>button</td> 
   <td>按钮</td> 
  </tr> 
  <tr> 
   <td>checkbox</td> 
   <td>复选框</td> 
  </tr> 
  <tr> 
   <td>form</td> 
   <td>表单</td> 
  </tr> 
  <tr> 
   <td>input</td> 
   <td>输入框</td> 
  </tr> 
  <tr> 
   <td>label</td> 
   <td>标签</td> 
  </tr> 
  <tr> 
   <td>picker</td> 
   <td>选择器</td> 
  </tr> 
  <tr> 
   <td>radio</td> 
   <td>单选按钮</td> 
  </tr> 
  <tr> 
   <td>textarea</td> 
   <td>多行文本输入框</td> 
  </tr> 
 </tbody> 
</table>

其余的就自己看开发文档吧

我们使用VIEW视图来编写第一个小程序，在index.wxml中输入，点击保存

这样我们的第一个hello word就显示出来了  
![在这里插入图片描述][d0a6832da0a24514bab09fc46fe8e6d4.png]

### 如何在真机上体验 ###

上方有工具栏部分，我们选择真机调试，有自动预览，也有扫二维码，就可以直接在开发者的手机上体验小程序了，注意这里只是开发板，需要上线的话，是需要提交审核的，发布后才能上线![在这里插入图片描述][bc3d7fef7746409aa532968a9a961004.png]

### 如何修改APPID ###

小程序可以先开发，在部署到需要发布的小程序中，点击右边详情，修改基本信息为上方所注册的appid号（在网页后台设置就能看到）  
![在这里插入图片描述][03b5994d382e45cf84759ff633b18bab.png]

### 不校验合法域名是什么意思 ###

小程序发布是需要配置合法域名的（如果是云开发可以省略），也就是只有出现在后台白名单中，才可以生效，但是在开发中我们可以选择不校验合法域名，先完成开发，再来部署后面  
![在这里插入图片描述][4f44e54897e249409abad2053fd6532b.png]

### 如何更改配置合法域名 ###

在部署中只需要在后台点击【开发管理】中的【开发设置】找到服务器域名即可  
![在这里插入图片描述][42f0eba5a33044fc9a41fd77f8a74b35.png]  
![在这里插入图片描述][764b6db8029e42e9b3e5dba5c26bb7f8.png]  
这里的https是http加密后的，包括wss也是一样的，如何认证ssl我们后面再说，像一些即时通讯服务例如MQTT来说，需要将ws认证为wss 我在博客中也有介绍，能快速的将一个MQTT服务完成WSS认证，我在这部分踩坑很久，如果大家遇到MQTT在WSS部署相关的问题可以参考我这篇文章[解决微信小程序MQTT真机连接问题与合法域名配置SSL问题][MQTT_SSL]

### 如何发布小程序 ###

配置好appid后 我们在微信开发者工具上的 【发布图标】就会高亮显示  
![在这里插入图片描述][86dfff0ad9d54627aa2056913959457b.png]  
点击后在输入版本号以及其他事项就可以完成发布  
![在这里插入图片描述][90ebf44bf897407dbac56526fcba246c.png]

在后台中的【版本管理】就可以找到 体验版，可以对其进行操作完成发布，![在这里插入图片描述][ebe896253eba4016b3ce1ab96a602550.png]

### 总结 ###

以上就是今天对小程序的入门级别的探索，有很多不足之处，还希望大家指点，零基础微信小程序入门开发教程将会开展系列栏目，欢迎大家订阅，转载，小程序的语法类似HTMl标签语言，程序执行呢是靠javascript，建议大家先对这方面有个基础再来学习，以便更好的完成入门，今天就到这里，只是对小程序简单的介绍，对初学者有一个概念，我们下期再见*★,°*:.☆(￣▽￣)/$:*.°★* 。

[edb46b61a90e4335a4cc3584d0fd0536.png]: https://img-blog.csdnimg.cn/edb46b61a90e4335a4cc3584d0fd0536.png
[Link 1]: https://mp.weixin.qq.com/
[ac6ff99f620c447691fcfdad1a642f24.png]: https://img-blog.csdnimg.cn/ac6ff99f620c447691fcfdad1a642f24.png
[6dfe0a19f67240d3b9ec7b91b8574cb5.png]: https://img-blog.csdnimg.cn/6dfe0a19f67240d3b9ec7b91b8574cb5.png
[Link 2]: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
[df8c420917214939a7630a967961af87.png]: https://img-blog.csdnimg.cn/df8c420917214939a7630a967961af87.png
[e52ff5cd3cc34c7cb1eb262676c4abcb.png]: https://img-blog.csdnimg.cn/e52ff5cd3cc34c7cb1eb262676c4abcb.png
[9fd52cf339c54c5f9fef9eba1ed0ccba.png]: https://img-blog.csdnimg.cn/9fd52cf339c54c5f9fef9eba1ed0ccba.png
[b7747346cdfd4ddf89592772405f6961.png]: https://img-blog.csdnimg.cn/b7747346cdfd4ddf89592772405f6961.png
[94c9cbf2412947c79adbf5970baf6c25.png]: https://img-blog.csdnimg.cn/94c9cbf2412947c79adbf5970baf6c25.png
[Link 3]: https://developers.weixin.qq.com/miniprogram/dev/component/view.html
[d0a6832da0a24514bab09fc46fe8e6d4.png]: https://img-blog.csdnimg.cn/d0a6832da0a24514bab09fc46fe8e6d4.png
[bc3d7fef7746409aa532968a9a961004.png]: https://img-blog.csdnimg.cn/bc3d7fef7746409aa532968a9a961004.png
[03b5994d382e45cf84759ff633b18bab.png]: https://img-blog.csdnimg.cn/03b5994d382e45cf84759ff633b18bab.png
[4f44e54897e249409abad2053fd6532b.png]: https://img-blog.csdnimg.cn/4f44e54897e249409abad2053fd6532b.png
[42f0eba5a33044fc9a41fd77f8a74b35.png]: https://img-blog.csdnimg.cn/42f0eba5a33044fc9a41fd77f8a74b35.png
[764b6db8029e42e9b3e5dba5c26bb7f8.png]: https://img-blog.csdnimg.cn/764b6db8029e42e9b3e5dba5c26bb7f8.png
[MQTT_SSL]: https://blog.csdn.net/qq_35230125/article/details/124960889
[86dfff0ad9d54627aa2056913959457b.png]: https://img-blog.csdnimg.cn/86dfff0ad9d54627aa2056913959457b.png
[90ebf44bf897407dbac56526fcba246c.png]: https://img-blog.csdnimg.cn/90ebf44bf897407dbac56526fcba246c.png
[ebe896253eba4016b3ce1ab96a602550.png]: https://img-blog.csdnimg.cn/ebe896253eba4016b3ce1ab96a602550.png