hello-weapp 微信小程序最简示例教程

Posted 指尖上的DragonDean

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了hello-weapp 微信小程序最简示例教程相关的知识,希望对你有一定的参考价值。

技术分享

  • 添加项目,没有app id就选择无AppID, 勾选在当前目录中创建quick start项目,直接有个简单的示例,

技术分享

  • AppID 是微信开发者官方授权开发者的一个凭证, 目前只有200家受邀内测的公众号才有,所以咱们就通过无AppID开发调试吧!主要限制如下:

技术分享

  • 然后点击添加项目即进入具体项目的开发环境 技术分享

  • 我们先看看目前有的文件目录,点击左侧 编辑 按钮 打开所有文件目录

技术分享

  • 查看文件目录说明

    注意:为了方便开发者减少配置项,微信规定描述页面的这四个文件必须具有相同的路径与文件名。这个很关键,不能随意创建目录以及文件与页面关联 技术分享

  • 从官方文档得知 ,必须有的几项 技术分享 技术分享

  • 最简示例至少有一个简单的页面,所以,接下来我们删除一些文件来看最简示例的项目结构吧!

  • 先删除多余目录以及文件剩下,如下文件,

技术分享

  • 这时候,点击左下角的编译按钮,可以看到控制台大大的报错了,一看便知是少了logs这个目录,因为刚刚被删除了, 技术分享

  • 那我们去 app.json配置项中找到页面配置去除多余内容吧

技术分享

  • 剩下这样的应用配置 技术分享

  • 点击编译,清除控制台可以看到没有报错了,

技术分享

  • 点击编辑,打开 /pages/index/index.wxml 文件

技术分享

  • 改成下面这样

技术分享

  • 点击编译,ok最简示例hello weapp 完成了

技术分享

  • 其中wxml的写法可以看 官方组件文档,接着尝试各种吧!

  • 微信小程序中不能直接使用html,必须严格使用官方的组件库来开发页面显示,并且微信小程序中没有window和document对象,自然类似jquery/zepto 都是无法使用的 技术分享

  • 如果要问ajax怎么办?微信自然帮我们实现了一个接口来做数据通信的事情,请看这里

技术分享

  • ok 了,可以开始进一步熟悉微信小程序每一个组件和API来做应用了。

  • 微信小程序开发交流群563752274

以上是关于hello-weapp 微信小程序最简示例教程的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序资源汇总整理

微信小程序资源汇总整理

微信小程序开发入门教程

微信小程序 教程之条件渲染

免费下载全套最新017微信小程序视频教程+教学资料+学习课件+源代码+软件开发工具

不编程不写代码,微信小程序视频教程,开发工具+源码+后台