如何制作微信小程序?

微信小程序–开启二维码时代

WeChat小程序简介

微信小程序是2017年由腾讯开发的一种以微信为载体的微信小程序。在发布会上总裁骄傲的说到:相比较于app微信小程序不需要下载安装,只需要进行搜索就能使用,只需要扫码就能轻松分享
那么微信小程序是如何开发的呢?

微信公众平台

首先我们在百度里搜索 “微信公众平台”
如何制作微信小程序?_第1张图片
然后点击第一个官网
进去之后点击右上角注册
如何制作微信小程序?_第2张图片
如果你想开发和微信支付有关的小程序,你需要注册公司账号或者个体商户账号,但是你需要为此支付300元审核费用。支付后你可以拥有调用微信支付的权限。就会带来收益
经过一系列操作过后,你可以扫码登录进去
登录进去后是这个样子
如何制作微信小程序?_第3张图片
我们在“首页”–小程序发布流程—开发工具–点击 普通小程序开发工具
点进去之后是这样
如何制作微信小程序?_第4张图片
我们这个时候点击我画蓝线的位置
就会看到:
如何制作微信小程序?_第5张图片
我们点击“稳定版”进行下载
下载后点击它安装,然后打开它
如何制作微信小程序?_第6张图片
点击左面的+号
我们会看到:
如何制作微信小程序?_第7张图片
这里面有个叫AppID的东西,这是什么呢?
这个是微信小程序发布的时候的身份证号,每个微信小程序对应唯一的AppID。在你注册微信公众平台的时候你就已经有AppID了。我们一起回到微信公众平台去查看吧。
我们回到这个界面(就是登陆进去的界面)
如何制作微信小程序?_第8张图片
我们点击开发
在开发设置里我们就看到了AppID
如何制作微信小程序?_第9张图片
我们复制它
如何制作微信小程序?_第10张图片
然后下面的后端服务里我们可以先选择“不使用云开发”,这个云开发后续我们会讲解到,这个是一个强大的后端技术,初学者暂时用不到。
然后下面的语言选择JavaScript
如何制作微信小程序?_第11张图片
准备就绪后我们点击右下角的新建
然后你会看到这样的画面:
如何制作微信小程序?_第12张图片
如果左上角没有你的微信头像请点击登录一下
然后你的那个模拟器的位置,就是那个手机的位置可能是靠左的。这个是可以在设置中进行调的
我们按住Ctrl键再按住;键 也就是Ctrl+;然后就会蹦出设置
如何制作微信小程序?_第13张图片
我的模拟器选择是右边,这样看起来雅观
好了你说奇不奇怪,惊不惊喜。我什么代码都没有写,竟然模拟器上有我的微信头像和一些按钮!!
那个…是默认的示例代码呀
我们先把它们找到并清理掉,开启我们的代码之旅
我们首先展开Pages文件夹找到index文件夹然后打开
如何制作微信小程序?_第14张图片
单击index.wxml文件
按下ctrl+A 再按下Del删除所有示例代码
单击index.wxss文件也都删除掉代码
然后按下ctrl+s编译一下,模拟器中就什么也没有了
如何制作微信小程序?_第15张图片
然后我们开启我们的开发之旅吧:

滑动条演示:
如何制作微信小程序?_第16张图片
简单视频播放器演示:
如何制作微信小程序?_第17张图片
(注:上面图片的代码还不能直接copy使用具体如何写代码以及系统的学习我们下期再见)

你可能感兴趣的:(微信小程序)