微信小程序开发入门

骑猪看日落 2022-01-28 06:23 408阅读 0赞

### 文章目录 ###

*  简介
 *  准备
 *  开发
 *   *  开发工具及发布小程序
     *  开发技术概要
 *  提醒

# 简介 #

*  目前市面上有小程序的app有 微信、支付宝、今日头条、百度、抖音、淘宝、QQ(消息称6月份上线)。
 *  个人理解小程序开发，就是混合开发，app开放定义好的接口，供前端进行调用，可以拥有操控手机硬件的权限。
 *  和之前混合开发不同之处在于：  
    之前混合开发的方式使用的前端技术就是平时开发网站所使用的技术(html、css、js等)，开发出来的网页放到自家app里面的webview组件中。  
    目前小程序所采用的技术是把之前的技术进行封装，形成一套固定的框架和语法（类似于React、Vue），本质其实不变。
 *  如果有react、vue开发的经验，上手小程序开发应该是很快的。
 *  目前市面上这么多小程序app，在技术已经明确的情况下，选择哪个其实已经很简单了，如果公司没有业务方面的要求，肯定是选择大平台的，平台用户、日活多的。排除一下，只剩下微信小程序了?。
 *  这篇文章目的在于引导想要开发小程序的小白可以快速上手小程序，至于进阶开发小程序，则不在这篇文章的范畴。

# 准备 #

1.  小程序开发需要事先在[微信公众平台][Link 1]申请一个小程序账号![注册小程序账号][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70]
2.  注册后登录进入管理后台

![20190523143723575.png][]

1.  点击左侧设置，进行一些基本的设置
2.  点击开发 > 开发设置，里面的开发这ID一定要牢记，并且严格保密，然后进行服务器域名 配置  
    ![服务器域名配置][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70 1]

*  这里的服务器域名，就是你的请求后台接口的域名，必须配置正确，否则在小程序开发的时候，无法请求数据。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70 2]

1.  业务域名配置![业务域名配置][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70 3]

*  业务域名配置用于小程序web-view组件引入第三方网站页面  
    ![业务域名配置][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70 4]
 *  这里src指向第三方网站链接，网站的域名需要在业务域名配置准确。

# 开发 #

## 开发工具及发布小程序 ##

1.  开发工具选择

*  [微信开发者工具][Link 2] 根据自己的需求下载指定版本（建议选择）
 *  编辑器（vscode、sublime等）下载插件，自己配置（不建议选择）

1.  开发者工具界面  
    ![开发者工具界面][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70 5]

*  左侧为实时预览，右侧为代码编辑区域，下方为浏览器调试区
 *  上方为一些功能按钮，平时用到最多是上方中间的预览按钮（使用自己手机的微信扫一扫，可以在手机上看到最新的效果），上方靠右的上传按钮（需要在小程序管理后台进行下一步操作才能上线）

1.  上传版本：点击上传按钮后，微信开发者工具会对你的代码进行编译，压缩，上传成功后，需要进入小程序后管理后台，点击版本管理，可以看到已经上传的版本。

*  点击提交审核按钮，该版本会变成审核版本状态，
 *  接下来需要等待微信的审核，如果审核通过，管理员微信会收到审核通过的消息，并且审核版本会变成线上版本。  
    ![版本管理][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70 6]

1.  查找小程序：版本审核通过后，会在线上版本区域显示信息，可以通过搜索小程序名称，或者扫描小程序码进入到你的小程序。

*  小程序名称和小程序码可以在小程序管理后台的设置里面查找。

## 开发技术概要 ##

> 只是大概的归纳一下，不对技术具体分析，想要更详细的了解，建议查看[小程序开发官方文档][Link 3]

1.  小程序目前所使用的开发页面的技术稍有不同的是html文件和css文件

*  html文件在小程序里变成了wxml文件, 相应的标签也变成了小程序专有的标签（表单标签基本相同），并且有了和其他前端框架类似的功能，例如：数据绑定、条件渲染、列表渲染、模板等功能。
 *  css文件在小程序里变成了wxss文件，目前看来基本上和css特性基本相同，目前发现增加了一个尺寸属性  
    **rpx**，官方文档说明，**rpx** 可以根据屏幕宽度进行自适应。类似于css中的em、rem、vw等。
 *  字体font-size使用pt![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70 7]

1.  复用组件

*  在使用组件页面json文件里设置usingComponents
 *  在组件页面json文件里设置component
 *  组件可以嵌套组件

1.  父子组件间通信

*  父组件传递信息给自组件，直接在子组件上增加属性传递数据，子组件js文件 Component 里面properties 设置该属性，接收数据，直接可以在标签里写该数据
 *  子组件传递信息给父组件，传递数据通过this.triggerEvent(‘myevent’, data)， 父组件接收数据，bindmyevent=‘event’

# 提醒 #

1.  在wxss文件里面，background-image，图片路径不能是本地路径，必须是线上链接或者base64。
2.  转发功能：自定义转发按钮，通过自定义方法调用onShareAppMessage该方法，测试了发现行不通，目前转发还是通过button设置open-type=‘share’，或者点击右上角点击三点进行转发。

[Link 1]: https://mp.weixin.qq.com
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70]: /images/20220128/3169b5fb33fd4a6aa866e48924adb928.png
[20190523143723575.png]: /images/20220128/1337c10f4ae245a4af1d837740fd7d8c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70 1]: /images/20220128/9004ce8c7b2d49958c8535acac3b192e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70 2]: /images/20220128/a108841f435040ddaf607a257c5bc7eb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70 3]: /images/20220128/1d933bd4a6a644f4a2071de7cb7a9032.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70 4]: /images/20220128/c876460f45e149efad0f2e0a95ab2806.png
[Link 2]: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70 5]: /images/20220128/839f8951df584ddab9ca7cb0ff751075.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70 6]: /images/20220128/33d60a0e2a0f4adda18ae349c95eea43.png
[Link 3]: https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/introduction.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70 7]: /images/20220128/2502be5820aa4dd59eebe49478754e11.png