微信小程序开发入门教程

在这篇微信小程序开发教程中,我们将向你介绍快速试用和体验微信小程序开发工具和官方示例Demo。

本系列教程将引导你完成如下任务:

  1. 下载微信web开发者工具和小程序官方Demo。
  2. 添加小程序示例Demo到项目
  3. 体验小程序常用组件及接口

 

第一部分 下载开发者工具和官方Demo

 

微信小程序开发者工具

为了帮助开发者简单和高效地开发微信小程序,微信官方推出了全新的微信小程序开发者工具,该工具集成了开发调试、代码编辑及程序发布等功能。

下载地址为  windows 64 、 windows 32 、 mac

开发者工具根据操作系统类型选择相应的下载地址

 

微信小程序官方示例Demo

下载地址  https://mp.weixin.qq.com/debug/wxadoc/dev/demo/demo.zip

demo下载后解压即可。 

 

 

第二章 添加小程序Demo项目

启动开发者工具后,如下图所示

使用微信扫描二维码登录

点击确认登录后,调试类型选择“本地小程序项目”

点再击添加项目

项目配置时

APPID点击“无AppID”

项目名称,可以填“方倍工作室小程序开发入门教程”

项目目录选择官方Demo解压后的地址

 最后点击“添加项目”按钮。


第三章 体验官方Demo组件和接口

 在上方的手机类型中,将手机型号选择成适合屏幕分辨率大小或自己喜欢的类型,比如iPhone5

在底部的小程序预览窗口中查看点击各组件查看官方自带的类型,以及在接口中体验各种接口的接口能力。

 

比如在“接口”->"开放接口"->“获取用户信息”中,可以获得当前登录用户的昵称和头像。

 


第四章 总结

 

入门教程就这样简单?是的,做为入门来讲,就只有这些东西。但其实里面已经包括很多了。

  • 1. 下载了微信小程序开发者工具,后续开发小程序都要使用这个。
  • 2. 创建了小程序项目,虽然是本地的,但真实的也和这一样。
  • 3. 体验了官方的Demo,并且使用接口获得了用户的个人信息。

接下来该做什么呢?你可以购买微信小程序开发视频,书中包括了微信小程序开发几乎所有的接口讲解,总共内容有40多G,以及为0基础初学者准备的前端开发视频教程。

地址为 https://item.taobao.com/item.htm?id=546144853276 。

 

时间: 2024-10-23 17:49:10

微信小程序开发入门教程的相关文章

微信小程序开发实战教程之手势解锁_javascript技巧

代码:https://github.com/jsongo/wx-gesture-lock 这个手势解锁的demo使用了https://github.com/lvming6816077/H5lock 这个项目的算法和主逻辑,整合到微信小程序来,修改了很多地方的语法来适配小程序,去掉了window.document等函数,同时也添加了新的机制来解耦界面的操作和第三方库,这个下面会介绍到. 不过可惜的是,这个demo也只能在开发工具上玩玩,到真机上测试的时候,手指一滑动,页面会跟着滚动,手势没法使用.

《微信小程序开发入门精要》——第2章,第2.1节水平排列

第2章 布局微信小程序开发入门精要布局是任何支持UI的技术都会涉及到的.小程序的布局采用了和React Native相同的flex(弹性布局)方式,使用方法也类似(只是属性名不同而已).因此,如果读者已经对React Native的布局比较了解,那么将非常容易掌握小程序布局.即使对React Native的布局不了解,通过对本章的学习,也可以掌握小程序布局的核心技术. 本章要点水平排列布局水平折行排列布局垂直排列布局垂直折列排列布局水平排列对齐布局垂直排列对齐布局水平等间隔排列布局带边距的水平等

《微信小程序开发入门精要》——第1章,第1.1节什么是微信小程序

第1章 微信小程序入门微信小程序开发入门精要微信小程序是腾讯在2016年9月推出的一种新型的微信扩展.尽管目前还没有正式开发,但依然受到了非常多的关注.这主要是由于腾讯的影响力,以及微信在国内拥有的庞大的用户群体.在2017年1月9日,腾讯已经正式上线了小程序,这意味着任何人都可以在手机微信中使用小程序.由于目前小程序的数量还不多,所以现在进入小程序开发领域,可能会赶上小程序的第一拨红利.OK,废话少说,从本章开始,让我们深入了解微信小程序的原理以及详细的开发过程. 本章要点什么是微信小程序注册

《微信小程序开发入门精要》——第1章,第1.6节开发第一个微信小程序

1.6 开发第一个微信小程序 本节将从零开始开发一款微信小程序.该程序是一个猜拳游戏,功能很简单,单击"开始"按钮后,会快速切换"锤子""剪刀"和"布",直到按"停止"按钮,会显示"锤子""剪刀"和"布"中的一个,该游戏可以实现双方或多方猜拳.本节的目的是通过该例子,将开发微信小程序的过程完整讲述一遍,从配置开发环境.建立小程序项目,一直到将微信小

《微信小程序开发入门精要》——导读

目 录第1章 微信小程序入门 第1章第1节第1章第2节第1章第3节第1章第4节第1章第5节第1章第6节第1章第7节第2章 布局 第2章第1节第2章第2节第2章第3节第2章第4节第2章第5节第2章第6节第2章第7节第2章第8节第2章第9节第3章 视图容器第4章 视图层技术第5章 基础组件第6章 表单组件第7章 多媒体组件第8章 其他组件第9章 网络第10章 多媒体第11章 数据存取第12章 位置第13章 设备第14章 界面第15章 开放接口第16章 徽章(Badge)第17章 基础组件第18章 高

《微信小程序开发入门精要》——第1章,第1.2节原生热布局

1.2 原生热布局尽管本书的主题是微信小程序,但这里还要提一下原生热布局的概念.由于目前移动平台主要有Android和iOS,但这两个平台使用的开发技术完全不同(前者主要使用Java,后者主要使用OC或Swift),所以就需要有一种可以同时开发两种平台的技术,这样理论上可以节省一半的开发成本. 以前比较流行的技术是混合开发(Hybird),这种技术很简单,就是HTML5+CSS+JavaScript的结合.和木桶原理一样,木桶装多少水,是由最短那个木板决定的,而在这三者组合中,HTML5就成为那

《微信小程序开发入门精要》——第1章,第1.7节小结

1.7 小结本章用一个完整的例子从头到尾演示了从开发小程序到真机测试,再到上传发布的完整过程.尽管本章提供的例子非常简单,但足以清楚地展示小程序开发的完整过程.不过要想开发更加高级的小程序,还需要继续阅读后续的章节.

《微信小程序开发入门精要》——第1章,第1.4节获得AppID

1.4 获得AppID 尽管开发小程序AppID并不是必须的,但如果要在真机上测试小程序,以及发布小程序,就必须要用到AppID了.这就和Apple的开发者账号一样,如果不花99$/年的费用购买开发者账号,你就只能在iOS模拟器上玩玩了.当然,小程序的AppID是不收费的,只要注册者满足资质,就可以免费注册,并获得AppID. 如果读者按着上一节的步骤成功注册了小程序账号,并登录到小程序后台管理页面.单击左下角的"设置"链接,在右侧单击"开发设置"选项卡,可以看到&

《微信小程序开发入门精要》——第1章,第1.3节注册小程序账号

1.3 注册小程序账号在开发小程序之前,需要注册一个小程序账号,并用与账号绑定的手机微信扫描开发工具的二维码才能登录开发小程序的IDE(将在1.4节介绍).首先进入如下地址的页面.https://mp.weixin.qq.com 如果已经用微信公众号登录,请注销.然后单击右上角"立即注册"链接,进入注册页面.该页面有如图1-1所示的4个注册选项,分别是订阅号.服务号.小程序和企业号. ▲图1-1 注册类型 也就是说,这4个注册类型需要使用4个不同的账号,如果读者已经有了订阅号或其他账号