首页 > 软件开发 > 微信web开发教程 创建小程序

快速发布【软件开发】相关需求,专业顾问为您服务 快速发布

用此手机号发布,您还可以点击 更换

发布需求
请输入正确的手机号
请输入正确的验证码

您是不是要找:

  • 专家问诊,提供专业建议
  • 急速响应,体验省心
  • 根据需求灵活定制解决方案

微信web开发教程 创建小程序

标签:微信web开发教程 2017-8-17 作者:t_2180hn1ly1

  微信应用号终于来了!目前还处于内测阶段,微信只邀请了部分企业参与封测。想必大家都关心应用号的最终形态到底是什么样子?怎样将一个「服务号」改造成为「小程序」?下面小编展示一下官方的微信web开发教程


  1、微信web开发教程:获取微信小程序的 AppID


  首先,我们需要拥有一个帐号,如果你能看到该文档,我们应当已经邀请并为你创建好一个帐号。注意不可直接使用服务号或订阅号的 AppID。 利用提供的帐号,登录微信,就可以在网站的「设置」-「开发者设置」中,查看到微信小程序的 AppID 了。


  注意:如果我们不是用注册时绑定的管理员微信号,在手机上体验该小程序。那么我们还需要操作「绑定开发者」。即在「用户身份 - 开发者」模块,绑定上需要体验该小程序的微信号。本教程默认注册帐号、体验都是使用管理员微信号。


  2、微信web开发教程:创建项目


  我们需要通过开发者工具,来完成小程序创建和代码编辑。


  开发者工具安装完成后,打开并使用微信扫码登录。选择创建「项目」,填入上文获取到的 AppID,设置一个本地项目的名称(非小程序名称),比如「我的第一个项目」,并选择一个本地的文件夹作为代码存储的目录,点击「新建项目」就可以了。


  为方便初学者了解微信小程序的基本代码结构,在创建过程中,如果选择的本地文件夹是个空文件夹,开发者工具会提示,是否需要创建一个 quick start 项目。选择「是」,开发者工具会帮助我们在开发目录里生成一个简单的 demo。


  项目创建成功后,我们就可以点击该项目,进入并看到完整的开发者工具界面,点击左侧导航,在「编辑」里可以查看和编辑我们的代码,在「调试」里可以测试代码并模拟小程序在微信客户端效果,在「项目」里可以发送到手机里预览实际效果。


  3、微信web开发教程:编写代码


  点击开发者工具左侧导航的「编辑」,我们可以看到这个项目,已经初始化并包含了一些简单的代码文件。最关键也是必不可少的,是 app.js、app.json、app.wxss 这三个。其中,.js 后缀的是脚本文件,.json 后缀的文件是配置文件,.wxss 后缀的是样式表文件。微信小程序会读取这些文件,并生成小程序实例。


  4、微信web开发教程:创建页面


  在这个教程里,我们有两个页面,index 页面和 logs 页面,即欢迎页和小程序启动日志的展示页,他们都在 pages 目录下。微信小程序中的每一个页面的【路径 + 页面名】都需要写在 app.json 的 pages 中,且 pages 中的第一个页面是小程序的首页。


  每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js、index.wxml、index.wxss、index.json。.js 后缀的文件是脚本文件,.json 后缀的文件是配置文件,.wxss 后缀的是样式表文件,.wxml 后缀的文件是页面结构文件。


  开发者工具左侧菜单栏选择「项目」,点击「预览」,扫码后即可在微信客户端中体验。


  目前,预览和上传功能尚无法实现,需要等待微信官方的下一步更新。


  以上就是小编带来的关于微信web开发教程的全部资讯,大家看完之后有什么感悟吗?如果有什么不满意的地方,小编向你道歉,因为小编也不是这方面的专家,难免有所疏漏,万望海涵!要是想要了解更多相关信息,就去八戒服务购行业资讯看看吧,更多有趣资讯在那等你。


最新文章推荐

软件开发暂无最新文章查看全部推荐文章>

推荐人才