小程序入门---开发工具的使用

简介: 小程序发布到现在已经2年零2个月了,现在越来越多的企业倾向于开发小程序。作为一位前端开发人员,虽然对小程序有所耳闻,却一直没有尝试去做。只是觉得很火的样子,今天突然有了点兴趣,就学习了一下,觉得还真不错!下面我简单聊一下小程序开发工具的使用以及相关入门知识。
+关注继续查看

小程序发布到现在已经2年零2个月了,现在越来越多的企业倾向于开发小程序。作为一位前端开发人员,虽然对小程序有所耳闻,却一直没有尝试去做。只是觉得很火的样子,今天突然有了点兴趣,就学习了一下,觉得还真不错!下面我简单聊一下小程序开发工具的使用以及相关入门知识。

一、申请注册小程序

  使用一个没有注册过微信公众号和小程序的邮箱,注册小程序。注册地址:https://mp.weixin.qq.com/wxopen/waregister?action=step1

1217233-20190310210032979-1264065827.png

二、安装开发工具

开发工具下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=19030621

下载完成后,打开小程序开发者工具,用微信扫码登录开发者工具,准备开发你的第一个小程序吧!

三、新建项目

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

1217233-20190310210808891-317820841.png

1217233-20190310211206678-1079183634.png

四、小程序代码结构

  开发目录:  

├── app.js
├── app.json
├── app.wxss
├── pages
│   │── index
│   │   ├── index.wxml
│   │   ├── index.js
│   │   ├── index.json
│   │   └── index.wxss
│   └── logs
│       ├── logs.wxml
│       └── logs.js
└── utils

  1、app.json

    这是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等


{
  "pages": ["pages/index/index", "pages/logs/logs"],  // 页面配置
  "window": {
    "backgroundTextStyle": "light", // 下拉 loading 的样式,仅支持 dark / light
    "navigationBarBackgroundColor": "#fff",  //导航栏背景颜色 支持16进制
    "navigationBarTitleText": "WeChat", // 导航栏标题文字内容
    "navigationBarTextStyle": "black"   // 导航栏标题颜色,仅支持 black / white
  }
}

2、在pages目录下,由一个文件夹中的四个同名不同类型文件组成。.js是脚本文件,.json是配置文件,.wxss是样式表文件,.wxml是页面结构文件,其中json和wxss文件为非必须(默认会继承app的json和wxss默认设置)。

五、测试Demo

1217233-20190310213216689-1469780346.png
相关文章
|
4月前
|
小程序 开发工具 开发者
小程序简介和开发工具
小程序简介和开发工具
|
5月前
|
人工智能 Linux 编译器
Linux环境基础开发工具
Linux环境基础开发工具
|
11月前
|
IDE Java 开发工具
Java 基础入门 | 第三章 IDE 开发工具的安装与使用
下载地址下载 IntelliJ IDEA:JetBrains 功能强大、符合人体工程学的 Java IDE分为商业版和社区版,商业版功能强大可以免费试用30天,社区版免费,但是功能相对于商业版的少很多。选择一个版本进行下载, 安装。双击下载的
76 0
Java 基础入门 | 第三章 IDE 开发工具的安装与使用
|
Java 开发工具 Windows
win10下JDK环境变量配置与IDEA开发工具清晰简洁步骤,迈出Java学习第一步
win10下JDK环境变量配置与IDEA开发工具清晰简洁步骤,迈出Java学习第一步
189 0
win10下JDK环境变量配置与IDEA开发工具清晰简洁步骤,迈出Java学习第一步
|
IDE Java 网络安全
本地 IDE 开发代码方式|学习笔记
快速学习本地 IDE 开发代码方式
101 0
本地 IDE 开发代码方式|学习笔记
|
小程序 Ubuntu JavaScript
7.4【微信小程序全栈开发课程】小程序上线--基于Ubuntu搭建小程序运行环境
上一节我们安装了nginx和SSL证书,这一节继续来搭建小程序运行环境
229 0
|
小程序 JavaScript API
01-小程序:开发入门篇
01-小程序:开发入门篇
314 0
01-小程序:开发入门篇
|
XML 数据安全/隐私保护 数据格式
鸿蒙系统应用开发入门HelloWord(DevEco Studio怎么启动项目以及程序的运行过程)
使用DevEco Studio新建项目之后,会自带HelloWorld(其他语言需要我们自己写),由于项目使用的模拟器不是在我们本地,而是部署在华为的服务器中,所以我们需要登录华为账号并实名认证才可以使用
455 0
鸿蒙系统应用开发入门HelloWord(DevEco Studio怎么启动项目以及程序的运行过程)
|
Java PyTorch 算法框架/工具
LibTorch入门——Win10+VS2017配置LibTorch开发环境。
LibTorch入门——Win10+VS2017配置LibTorch开发环境。
540 0
LibTorch入门——Win10+VS2017配置LibTorch开发环境。
|
移动开发 IDE Java
IDE之VS:Visual Studio的简介(包括 VS2013、VS2015、VS2017、VS2019)、安装、入门、使用方法之详细攻略(一)
IDE之VS:Visual Studio的简介(包括 VS2013、VS2015、VS2017、VS2019)、安装、入门、使用方法之详细攻略
IDE之VS:Visual Studio的简介(包括 VS2013、VS2015、VS2017、VS2019)、安装、入门、使用方法之详细攻略(一)
相关产品
云迁移中心
推荐文章
更多