快速开发我的小程序

概述

 小程序是什么就不做过多的介绍了 这里主要对官方文档上的描述进行一个简要的整理记录让刚接触到小程序的开发人员有一个快速的了解,一切以官方文档为主

 开发小程序技能要求:熟悉 html、css、javaScript 这是必备的

 小程序采用的是MVVM 的开发模式开发了一套自己的模板语法,如果你有使用过类似的框架(列如:React, Vue)那么开发起来将得心应手

开发准备

  • 账号申请

首先我们的申请一个小程序开发者管理后台,在这里可以管理你的小程序的权限,查看数据报表,发布小程序等操作。

点击 https://mp.weixin.qq.com/wxopen/waregister?action=step1 根据指南填写对应的信息
在这里插入图片描述

  • 下载开发者工具

下载连接:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=18112017

根据自己的操作系统下载对应的安装包进行安装,有关开发者工具更详细的介绍可以查看 《开发者工具介绍》。

在这里插入图片描述

  • 后台环境

后台服务器的话根据实际情况来,我这里采用的是SpringBoot、Centos7

为了安全 小程序上线强制要求采用https且在小程序后台配置的域名列表中的服务

在开发过程中可以去除https的验证

开发小程序跟开发一个web服务是一样的

创建我的第一个小程序

1. 打开下载好的小程序开发工具,选择小程序项目以开发者身份进行登录

在这里插入图片描述

2.创建一个小程序项目
在这里插入图片描述

  • 项目目录:项目存放目录
  • AppID:小程序管理平台 “设置”-“开发设置”
  • 项目名称:项目的名称

3.编写我的小程序

在这里插入图片描述

4.预览
在这里插入图片描述

到这里就已经完成了一个简单小程序,具体的语法配置请参考官方文档 上边写的非常详细

小程序的组成

微信团队自己构建了一套针对小程序开发的语法,但是本质和html是一样的,如果你使用过Vue等Mvvm的前台框架,那么你在开发使用小程序时是非常简单的

在这里插入图片描述

跟目录下的是全局配置,home下面的全部是局部配置。

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:

文件必需作用
app.js小程序逻辑
app.json小程序公共配置
app.wxss小程序公共样式表

以上三个文件都是针对小程序的全部配置还有一个 project.config.json 这个是个人开发习惯设置

project.config.json:

通常大家在使用一个工具的时候,都会针对各自喜好做一些个性化配置,例如界面颜色、编译配置等等,当你换了另外一台电脑重新安装工具的时候,你还要重新配置。

考虑到这点,小程序开发者工具在每个项目的根目录都会生成一个 project.config.json

一个小程序页面由四个文件组成,分别是:

文件必需作用
.js页面逻辑(js就是用来编写我们交互脚本的地方)
.wxml页面结构(可以理解为wxml就是html)
.wxss页面样式表(wxss可以理解为css)
.json配置文件(主要对当前页面进行局部的配置)

上线

  • 提交审核

为了保证小程序的质量,以及符合相关的规范,小程序的发布是需要经过审核的。

在开发者工具中上传了小程序代码之后,登录 小程序管理后台 - 开发管理 - 开发版本 找到提交上传的版本。

在开发版本的列表中,点击 提交审核 按照页面提示,填写相关的信息,即可以将小程序提交审核。

需要注意的是,请开发者严格测试了版本之后,再提交审核, 过多的审核不通过,可能会影响后续的时间。

在这里插入图片描述

  • 发布

审核通过之后,管理员的微信中会收到小程序通过审核的通知,此时登录 小程序管理后台 - 开发管理 - 审核版本中可以看到通过审核的版本。

请点击发布,即可发布小程序。

更多更详细的使用说明请参考官方文档

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值