小程序入门第一课,从申请账号开始带你认识微信小程序

        微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验

目录

申请账号与安装工具

        01  申请账号

        02  安装开发工具

        03  新建项目

小程序项目构成

        四种类型文件

        目录文件介绍

        页面文件组成


申请账号与安装工具

01  申请账号

        开发小程序的第一步,你需要拥有一个小程序帐号,通过这个帐号你就可以管理你的小程序。

1.  进入 小程序 根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号在这个小程序管理平台,你可以管理你的小程序的权限,查看数据报表,发布小程序等操作

2.登录 小程序后台我们可以在菜单开发”-“开发设置看到小程序的 AppID 了 。小程序的 AppID 相当于小程序平台的一个身份证,后续你会在很多地方要用到 AppID,有了小程序帐号之后,我们需要一个工具来开发小程序

02  安装开发工具

        前往 稳定版 Stable Build | 微信开放文档 ,根据自己的操作系统下载对应的安装包进行安装,有关开发者工具更详细的介绍可以查看 《开发者工具介绍》 。打开小程序开发者工具,用微信扫码登录开发者工具,准备开发你的第一个小程序吧!

03  新建项目

        新建项目选择小程序项目,选择代码存放的硬盘路径,填入 刚刚申请到的小程序的 AppID,给你的项目起一个好听的名字,勾选 "不使用云服务" (注意: 你要选择一个空的目录才可以创建项目),点击新建,你就得到了你的第一个小程序了,点击顶部菜单编译就可以在微信开发者工具中预览你的第一个小程序。

比如:

小程序入门第一课,从申请账号开始带你认识微信小程序_第1张图片

或许你的选项是这样的:

小程序入门第一课,从申请账号开始带你认识微信小程序_第2张图片

小程序项目构成

四种类型文件

小程序中不同类型的文件

作用

等价于web开发的

.json

JSON 配置文件

web开发里边没有

.wxml

WXML 模板文件

.html

.wxss

WXSS 样式文件

.css

.js

JS 脚本逻辑文件

.js

目录文件介绍

小程序入门第一课,从申请账号开始带你认识微信小程序_第3张图片

文件目录介绍:

  •  app.json 

         app.json 是当前小程序的 全局配置 ,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。一般项目里边的 app.json 配置内容如下

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  }
}

 pages   存放项目的页面(哪个页面放在第一位就默认显示哪个页面)

 window   定义小程序所有页面的顶部背景颜色,文字颜色定义等

        "backgroundTextStyle": "light",  背景文字

        "navigationBarBackgroundColor": "#f56",  导航栏背景颜色

        "navigationBarTitleText": "你好",  导航栏标题

        "navigationBarTextStyle": "white"   导航栏文字颜色:white/black

页面文件组成

        一个小程序页面由四个文件组成,分别是:

文件

必需

作用

js

页面逻辑

wxml

页面结构

json

页面配置

wxss

页面样式表

注意:为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径与文件名。


关于小程序的更多知识(组件、语法、事件),我们下期再见..

你可能感兴趣的:(微信小程序,前端,javascript,小程序)