专栏首页极乐技术社区微信小程序开发详解《一》开发准备,开发工具使用简介,工程目录结构

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

一:开发准备

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 条评论
登录 后参与评论

相关文章

  • 小程序的十万个为什么丨 开发中被问到最频繁的问题

    极乐君
  • 小程序 · 一周报

    6 月 1 日,云南省政府和腾讯联合打造的全域旅游智慧平台「一部手机游云南」app 正式上线,其中包含 7 个辅助小程序,能够做到厕位引导都一次到位。

    极乐君
  • 小程序搜索组件wxSearch

    一、功能  支持自定义热门key  支持搜索历史  支持搜索建议  支持搜索历史(记录)缓存  二、使用  1、将wxSearch文件夹整个拷贝到根目录下  2...

    极乐君
  • [编程经验]R语言入门及描述性统计分析方法

    好吧,我承认,最近都没好好学习了,事情比较多,好几天晚上我都会写下标题,然后就没有然后了,今天再不能忍了,决定来一发。但是,我觉得还是推文的质量要比数量更加重要...

    用户1622570
  • StackOverflow 上面最流行的 7 个 Java 问题!

    StackOverflow发展到目前,已经成为了全球开发者的金矿。它能够帮助我们找到在各个领域遇到的问题的最有用的解决方案,同时我们也会从中学习到很多新的东西。

    路人甲Java
  • StackOverflow 上面最流行的 7 个 Java 问题!

    StackOverflow发展到目前,已经成为了全球开发者的金矿。它能够帮助我们找到在各个领域遇到的问题的最有用的解决方案,同时我们也会从中学习到很多新的东西。

    良月柒
  • day5(面向对象2)

    注意:千万不要为了获取其他类的功能,简化代码而继承。 必须是类与类之间有所属关系才可以继承,所属关系 is a。

    小二三不乌
  • 5w 字 | 172 图 | 超级赛亚级 Spring Cloud 实战

    SpringBoot、MyBatis、Redis、 MySql、 MongoDB、 RabbitMQ、Elasticsearch

    好好学java
  • 【选择题】Java基础测试二(15道)

    【选择题】Java基础测试二(15道) 11.对于构造方法,下列叙述正确的是:(AC) A. 构造方法的方法名必须与类名相同; B. 构造方法必须用void...

    Java帮帮
  • 本周最新 10 款小程序,壁纸、表情包,都是你喜欢的 | 晓榜 #19

    想对抗人生的虚无?除了它之外,本期「知晓程序」还精心挑选了一周最新 的 10 款小程序,让你的生活绝不无聊。

    知晓君

扫码关注云+社区

领取腾讯云代金券