找回密码
 立即注册

QQ登录

只需一步,快速开�

微信小程序开发资源

关注:1597

所属分类: 微信开发 微信小程序开发资源



本版块为微信小程序资源分享区,包括微信小程序开发中可能会用到的各类小程序开发工具、小程序demo源码及开发教程等。

快捷导航www.henkuai.com):微信小程序社区微信小程序导航微信小程序资源下载微信小程序官方课程

[更新动态] 微信小程序第一篇教程,新手入门

[复制链接]
查看: 9498|回复: 47
最佳答案
0 

2

主题

5

帖子

107

积分

新人求带

积分
107
 楼主| 发表于 2016-9-28 16:15:09 | 显示全部楼层 |阅读模式
咱们直接进入主题吧,首先下载微信开发者工具,下载地址:很快开发者工具下载或者官方下载开发者工具,都是一样的,目前都是最新的09.092300版本

安装很简单,不多赘述。

安装完成后运行小程序开发者工具,然后扫码登录绑定,以后就算换微信账号重新登录绑定,之前创建的功能也都能全部看见。

1、创建工程

创建工程,如果没有内测资格可以不用填写AppID,有一个无AppID的选项,选择即可。虽然没有AppID会有功能限制,但是大家仅用于学习用途是完全够了的,没太大影响。
150425.png

然后选择项目目录后有一个创建quick start项目的选项,默认勾选了,这个就是默认为我们创建了一个Hello World界面,否则就是完全空的项目。
244.png

2、Hello World

创建好了工程以后,就可以进入小程序开发者工具的开发界面了,下图就是给我们创建好的Hello World界面。
3040.png

点击编辑可以看到Hello World程序的目录结构,微信和普通的前端代码不同。
41.png

根目录下有两个目录和三个代码文件:


app.js是小程序的主逻辑文件,可以理解为入口,我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量等。
app.json是对整个小程序的全局配置,我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。
app.wxss是整个小程序的公共样式表,我们可以在页面组件的 class 属性上直接使用app.wxss中声明的样式规则。


注意,以上三个目录必须放在根目录下!


pages目录为页面文件,比如我们的Hello World有两个界面,一个是首页,一个是日志页面,下图为日志页面,点击头像首页头像即可进入。
552.png

utils目录为库文件,比如日志页面的时间就是使用的时间库,可以自己自定义目录名也行,根据自己喜好。

一个页面由四个不同的后缀文件组成,在同一目录下,分别是.js(页面逻辑)、.json(页面配置)、.wxml(页面结构)、.wxss(页面样式表),其中wxml可以通俗的理解为页面上的一些可视控件,比如导航条什么的。

大家可以新建一个空的工程,仿照Hello World来做就明白了,其他请参考API文档。





回复

使用道具 举报

最佳答案
0 

0

主题

6

帖子

160

积分

新人求带

积分
160
发表于 2016-10-9 16:58:46 | 显示全部楼层
看看,学习下呀
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

85

帖子

1304

积分

专家路上

积分
1304
发表于 2016-10-10 14:54:22 | 显示全部楼层
看到这帖子真是高兴!学习下
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

6

帖子

160

积分

新人求带

积分
160
发表于 2016-10-10 16:39:09 | 显示全部楼层
很入门,不错
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

12

帖子

115

积分

新人求带

积分
115
发表于 2016-10-27 10:43:05 | 显示全部楼层
简单明了,谢谢
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

3

帖子

47

积分

新人求带

积分
47
发表于 2017-3-15 16:16:43 | 显示全部楼层
非常感谢,受益匪浅
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

17

帖子

172

积分

新人求带

积分
172
发表于 2017-5-1 08:20:31 | 显示全部楼层
厉害了 。
回复

使用道具 举报

最佳答案
0 

0

主题

11

帖子

45

积分

新人求带

积分
45
发表于 2017-5-2 20:31:19 | 显示全部楼层
学习了~
回复

使用道具 举报

最佳答案
0 

0

主题

11

帖子

45

积分

新人求带

积分
45
发表于 2017-5-2 20:31:23 | 显示全部楼层
学习了~
回复

使用道具 举报

最佳答案
0 

0

主题

5

帖子

47

积分

新人求带

积分
47
发表于 2017-5-2 22:34:56 | 显示全部楼层
学习学习
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.henkuai.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信公众号

广告推广
QQ:805874290

市场合作
zhongcong@henkuai.com