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

一:开发准备

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所示


本文分享自微信公众号 - 极乐技术社区(wxapp-union)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-01-04

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏疯狂的小程序

电商小程序的场景使用和营销手段

当所有人都期待在16年能借用小程序去收割一波新红利的时候,张小龙却与常人期盼不同,让小程序走低调路线,没有大步的向前进;在17年内小程序不断更新自己的能力,在年...

27970
来自专栏企鹅号快讯

微信可接收火车购票、退票及改签等通知啦!别忘了,春运火车票下周开售!

12306网站 微信支付功能上线试运行 持有微信支付账户的旅客 可以在12306网站及手机客户端支付页面 选择“微信支付”进行购买 全国各主要城市的车站、售票窗...

25450
来自专栏疯狂的小程序

微信小游戏的6大趋势分析

最近微信小游戏特别火爆,我也沉迷其中不能自拔,跳一跳永远上不了50,弃了;熬夜刷头脑王者排位不能自拔,今天终于把所有王者币输完了。我只想说:垃圾游戏,毁我青春,...

58350
来自专栏企鹅号快讯

期待已久的直播能力开放了!年底之前来波大的

哈喽艾瑞巴蒂~久违的小程序半夜更新又来啦~! 还是熟悉的时间,还是熟悉的躁动。 这次更新有些丰满,小程序更新更多连接能力—— 1、更多硬件连接功能开放 、小程序...

25460
来自专栏企鹅号快讯

小程序深夜连发4大功能!你们要的直播来了!

那个让我们夜不能寐的小程序终于又发布新能力了! 昨夜,微信公众平台发布了 4 项小程序新能力: 升级实时音视频录制及播放能力 开放更多的硬件连接能力 优化基础特...

23680
来自专栏疯狂的小程序

2018春节抢票攻略:不仅仅是12306微信小程序启用

一年一度的春运“抢票大赛”已于近日正式拉开帷幕,据了解,今年春运将于2月1日开始。近日,国家发改委等11个部门在北京召开全国春运电视电话会议进行工作部署,带来诸...

28350
来自专栏企鹅号快讯

微信小程序开放 Wi-Fi、NFC 连接能力,未来可直接刷地铁?

以下为具体升级要点: 1、升级实时音视频录制及播放能力 为更高效地连接用户与商家,小程序提供了实时音视频录制及播放组件。开发者在小程序自建后台服务或接入任意的云...

26850
来自专栏疯狂的小程序

小程序火爆的因素

几天前,我重新翻阅了2017年5月写的一篇关于小程序的文章,文章虽青涩但还算精确,文中阐述了三个观点:

263100
来自专栏疯狂的小程序

初探小程序之运营及未来方向

网络流传微信会做操作系统,但这里指的操作系统并不是传统意义上的操作系统,他不一定要承载办公等所有需求,但发力点一定在数据上。只有好的数据、大量的数据才能在下一代...

22250
来自专栏微信小开发

小程序“圣诞帽”的实现思路

这两天朋友圈被“圣诞帽”刷屏,这个小程序连微信官方都出来辟谣了,又一个现象级的玩意儿。从产品角度而言无疑是非常成功,但从技术角度而言是确实习以为常,创意很重要!...

289100

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励