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

Labradors 发布于2019-08-21 14:30 / 1789人阅读

摘要：仓库打开微信小程序官方开发文档，最好全篇看一遍，基本上就会了。

https://github.com/dingyiming...

仓库：https://github.com/dingyiming...

打开微信小程序官方开发文档，最好全篇看一遍，基本上就会了。

点击文档中工具选项卡中下载工具页面下载对应系统版本的微信开发者工具

注意：脱离微信开发者工具是不能调试的

好了，安装下工具即可打开,看到选择项目的界面，点击添加项目

添加项目,没有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来做应用了。

更多资源访问 https://github.com/dingyiming...

云服务器 GPU云服务器微信小程序支付微信小程序部署微信小程序搭建微信小程序环境

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87929.html

微信小程序资源汇总整理

摘要：有问题可通过微博联系我开源项目微信小程序微信小应用资源破解文档微信小应用示例代码文档简易教程开发者工具文档文档视图组件文档常见问题教程微信小程序开发文档微信公众平台文档微信小程序怎么开发玩物志用一个上午上线了电商应用爱范儿有问题可通过微博联系我： http://weibo.com/jinfali 开源项目 wechatApp-demo - 微信小程序 DEMO weapp-ide-...

guqiu 2019-08-29 11:20 评论0 收藏0
微信小程序资源汇总整理

摘要：有问题可通过微博联系我开源项目微信小程序微信小应用资源破解文档微信小应用示例代码文档简易教程开发者工具文档文档视图组件文档常见问题教程微信小程序开发文档微信公众平台文档微信小程序怎么开发玩物志用一个上午上线了电商应用爱范儿有问题可通过微博联系我： http://weibo.com/jinfali 开源项目 wechatApp-demo - 微信小程序 DEMO weapp-ide-...

xiaodao 2019-08-20 11:12 评论0 收藏0
微信小程序资源汇总整理

摘要：有问题可通过微博联系我开源项目微信小程序微信小应用资源破解文档微信小应用示例代码文档简易教程开发者工具文档文档视图组件文档常见问题教程微信小程序开发文档微信公众平台文档微信小程序怎么开发玩物志用一个上午上线了电商应用爱范儿有问题可通过微博联系我： http://weibo.com/jinfali 开源项目 wechatApp-demo - 微信小程序 DEMO weapp-ide-...

beanlam 2019-08-01 15:45 评论0 收藏0