首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序开发详解《一》开发准备,开发工具使用简介,工程目录结构

微信小程序开发详解《一》开发准备,开发工具使用简介,工程目录结构

作者头像
极乐君
发布2018-02-05 16:34:48
1.2K0
发布2018-02-05 16:34:48
举报
文章被收录于专栏:极乐技术社区极乐技术社区

一:开发准备

1、 注册微信开发者账号

登录:https://mp.weixin.qq.com/ 进行注册.

目前仅支持企业和组织等非个人注册微信小程序账号,注册详细情况可以参见如下链接:

http://kf.qq.com/faq/140806zARbmm161103r6vmiA.html

注:如果仅仅是为了学习开发微信小程序,可以参考这个地址注册测试号:http://www.wxapp-union.com/forum.php?mod=viewthread&tid=495

2、 微信开发者工具下载

由于微信公众平台改版,导致原来可以在https://mp.weixin.qq.com/wiki下面可以免费下载微信小程序开发工具这种可能没有了。

必须拥有微信小程序的开发账号,在如下网址下载扫描二维码下载开发工具。

https://mp.weixin.qq.com/debug/wxadoc/introduction/#登录

另外如果只是学习开发而已,可以在百度搜索微信小程序开发工具随意下载网友分享的工具也可以。

二:开发工具使用简介

1:PC桌面打开微信小程序开发工具(微信web开发者工具),如图1所示:

2: 用微信扫描图1中的二维码,如图2所示,并选择第一项“本地小程序项目”,如图3所示。(现在如果开发工具版本太低,扫描时会报错,请先升级开发工具,开发工具会自动检查版本并自动升级。)

3: 图3中如果第一次创建项目,请选择“添加项目”,否则选择已经添加的项目。选择“添加项目”,如图4所示。

4: 图4中如果仅仅是为了学习开发请选择“无AppID”,然后填写项目名称,选择项目目录,并且点解“添加项目”按钮。如图5所示,进入微信小程序开发工具主界面。

5: 图5中点击工具左上角的“编辑”,工具进入编辑模式界面,如图6所示

6: 图5中点击工具左上角的“调试”,工具进入调试模式界面,如图7所示

7: 图7中点击工具左下角的“后台”,此时程序模拟当电话打来时,微信小程序进入后台的状态,如图8所示

三:工程目录结构

1:打开微信小程序开发工具,进入编辑模式,如下图1所示

1:这个项目主要由pages/firstPage,pages/index,pages/logs,这几个文件夹组成,这几个文件夹主要描述整个小程序的界面信息。

每个文件下基本可以分为:.js,.wxml,.wxss,.json等文件组成。

例如:

  • index.js:描述index页面的逻辑信息(类比:js代码)
  • index.wxml:描述index页面的布局信息(类比:HTML页面布局)
  • index.wxss:描述index页面的布局的样式信息(类比:CSS信息)

2:项目总体配置信息:

由app.js,app.json,app.wxss三个文件组成

app.json:由图1所示,描述整个工程的页面信息(由"pages"描述),"window"主要描述该项目整体背景,导航栏等样式,如果某个文件夹中某个.json文件中有相同的描述,则会覆盖"window"中描述的信息。

app.wxss:主要描述该项目整体的样式,如图2所示

app.js:主要描述该项目入口逻辑,主要描述一些用户登录后的信息,如图3所示


本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2017-01-04,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 极乐技术社区 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档