微信小程序开发工具安装及项目结构介绍

一、微信小程序介绍

1、什么是微信小程序

传说中的微信“应用号”终于要来了,但它的正式名称很有可能是“微信小程序”。那么什么是小程序呢?小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载。
小程序传承了企业号、服务号:触手可得,不用安装,用完即走的优点。小程序的前景是非常不错的,小程序生态很可能成为移动原生生态的下一代替代品。

2、微信小程序的优点

    触手可得、不用安装、用完即走

3、微信小程序对行业的冲击

  • 原生生态下生存的很多公司的商业模式会受到很大冲击
  • 原生开发、 UI 设计、流量运营这些领域的人的失业率会增加
  • 对浏览器生态也会产生影响

4、学习微信小程序开发需要具备的基础

  • html、css、js基础
  • ajax基础
  • 简单的面向对象基础

前面扯了一大通的废话,下面转入正题吧,正式介绍微信小程序开发流程

二、开发工具下载及安装

官网地址https://mp.weixin.qq.com/wiki
注意:打开界面后,点开左侧‘微信公众平台’下拉菜单——>选择‘微信公众平台-小程序’菜单,即可看到小程序开发的相关文档手册的链接
下载地址https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

下载完成安装包之后和安装通常的软件一样安装,安装完成后打开开发工具界面如下(下面是我已经创建了一个小demo哦):
这里写图片描述

注意:首次打开工具的时候需要扫描二维码来绑定你的微信账号,做过微信开发的都知道,上图的图标就是你的微信图像哦。

三、微信小程序:Hello World创建

1、点击’添加项目’菜单弹出具体的添加界面
这里写图片描述
AppID:目前没有正式版本,所以选择‘无AppID’,等发布正式版本后可以根据情况修改;如果你有内测邀请,你可以登录:https://mp.weixin.qq.com,在网站的“设置”-“开发者设置”中,查看到微信小程序的 AppID;

项目名称:设置一个本地项目的名称(非小程序名称),比如“我的第一个项目”;

项目目录:选择一个本地的文件夹作为代码存储的目录。类似于Eclipse的工作空间,用来保存你的项目(注意,小程序创建的时候不会自动生产一个项目文件夹哦,所以要注意了)

参数设置完成后,点击’添加项目’按钮,即可创建自己的第一个小程序了。
注意:在创建过程中,如果选择的本地文件夹是个空文件夹,开发者工具会提示,是否需要创建一个 quick start 项目。选择“是”,开发者工具会帮助我们在开发目录里生成一个简单的 demo。

2、项目界面—菜单
这里写图片描述

编辑:可以查看和编辑我们的代码
注意:每次编辑完成后,需要切换到’调试’菜单,然后点击‘重启’功能才能生效哦。

调试:可以测试代码并模拟小程序在微信客户端效果

项目:可以发送到手机里预览实际效果(似乎没有内测AppID无法上传手机预览哦)

四、微信小程序目录结构介绍

目录介绍看下图及简易结构(建议向创建一个demo,结合demo来看哦):
这里写图片描述

详细介绍:

根目录:
    |-- app.js(必须)           脚本文件,小程序的逻辑文件:定义了一个应用实例,可通过getApp()获取到。
    |                       语法:app(json对象)
    |
    |-- app.json(必须)         公共配置文件,例如配配置导航条样式,底部tab菜单等
    |                    是一个JSON对象,pages属性类似于定义了路由数组,pages的第一个元素表示小程序的首页
    |
    |-- app.wxss         公共样式文件,公共的css文件
    |
    |-- untils           存放公用js文件的文件夹
    |    |
    |    |-- util.js
    |
    |-- pages            页面相关的文件夹名称不能修改
         |
         |-- index       index页面文件夹(注意:为了减少配置项,建议页面文件夹名称和文件夹下的文件名保持一致,且js/wxml/wxss/json四个文件有相同的路由)
              |
              |-- index.js(必须)       当前页面对应的js文件,可通过var app = getApp()来获取当前应用实例。
              |                  语法:Page(json 对象)
              |
              |-- index.wxml(必须)
              |-- index.wxss

         |
         |-- logs       logs页面文件夹
              |
              |-- logs.js
              |-- logs.json     logs页面的数据及配置文件
              |-- logs.wxml     logs页面的页面布局展示文件,相当于html
              |-- logs.wxss     logs页面的独立样式文件

建议:查看第四部分项目目录结构是,请先创建一个简单的小程序demo,然后结合实际demo查看,并且根据简易结构中的文字注意,查看没有文件并试着修改看看效果。

总结:这篇博文前半部分是长见识,后半部分在具体到小程序的开发流程,写的有些简单,有兴趣的可以去看看官网哦,后续我也会进行完善。此外后续的博文将进行一系列的小程序开发的介绍。

欢迎程序猿小火把的关注和支持,欢迎大家来吐槽哦。我是湖北-我家小菜。

猜你喜欢

转载自blog.csdn.net/jingsi1991/article/details/52823722