小程序入门---开发工具的使用-阿里云开发者社区

开发者社区> 半指温柔乐> 正文

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

简介: 小程序发布到现在已经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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
微信程序开发系列教程(三)使用微信API给微信用户发文本消息
微信程序开发系列教程(三)使用微信API给微信用户发文本消息
9 0
常用高效的开发工具推荐
作为研发人员,一些优秀的开发工具可以提升很多工作效率,节省许多时间。今天给大家推荐几款我个人认为比较不错的几款常用工具。 1. Postman-http请求模拟工具 Postman是一种网页调试与发送网页http请求的chrome插件。
1475 0
使用JSF和JSR168开发AJAX应用程序
使用JSF和JSR168开发AJAX应用程序 一、介绍 AJAX是一个热点,也逐渐变成了下一代互联网的标准,因为它提供了很多有益的特征,包括: (1)提高了用户的接受性和生产力,和桌面应用一样; (2)容易部署,其立即更新对所有用户有效; (3)连接标准且只依赖于广泛的部署技术; (4)对已存在的Web应用,易于增量更新; (5)有一个成功的组织——the OpenAjax Alliance(AJAX联盟),背后有很多重量级公司支持。
648 0
一站式开发工具HaaS Studio使用说明
为了让 HaaS 开发更加“易上手”,阿里云IoT团队推出了全新的“一站式”集成开发环境HaaS Studio。HaaS Studio 是一款基于VS Code的插件,是HaaS官方的集成开发环境。
174 0
阿里云短信使用入门/开发接口文档一篇文章全搞定
阿里云短信提供秒级触达到达率99%,国际/港澳台短信覆盖200多个国家和地区,阿里云短信接入简单
3383 0
首次曝光 | 阿里数万名开发者都在使用的数据库开发工具到底长什么样?
数据管理DMS(Data Management Service)是阿里巴巴自研图形化的数据库开发工具,已服务阿里巴巴及阿里云上几十万开发者实现安全便捷的数据库访问开发工作。用户可以通过DMS实现25种常见数据库的访问研发。
906 0
首次曝光 | 阿里数万名开发者都在使用的数据库开发工具到底长什么样?
数据管理DMS(Data Management Service)是阿里巴巴自研图形化的数据库开发工具,已服务阿里巴巴及阿里云上几十万开发者实现安全便捷的数据库访问开发工作。用户可以通过DMS实现25种常见数据库的访问研发。
1347 0
+关注
半指温柔乐
热衷于研究前端新知识,学习新技术。精通HTML5+CSS3,Javascript,jQuery,Angular,Bootstrap。
245
文章
205
问答
文章排行榜
最热
最新
相关电子书
更多
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载
《2021云上架构与运维峰会演讲合集》
立即下载