博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
小程序入门---开发工具的使用
阅读量:6529 次
发布时间:2019-06-24

本文共 1293 字,大约阅读时间需要 4 分钟。

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

转载地址:http://ecxbo.baihongyu.com/

你可能感兴趣的文章
7-设计模式介绍
查看>>
让运维更高效:关于ECS系统事件
查看>>
J2EE分布式框架--单点登录集成方案
查看>>
跨域传递参数
查看>>
android 4.2的新特性layoutRtl,让布局自动从右往左显示
查看>>
iOS tableView 下拉列表的设计
查看>>
sharepoint 2010 属性编辑工具 SPCamlEditor 1.5.1
查看>>
linux下配置网络环境
查看>>
java Windows7 下环境变量设置
查看>>
NBU异构还原Oracle完整备份的一些总结
查看>>
freeBSD安装详细讲解
查看>>
WSFC2016 VM弹性与存储容错
查看>>
文档管理,文本编辑控件TX Text Control .NET for WPF
查看>>
复习 Python 匿名函数 内建函数
查看>>
Security Identifiers | Win SRV2016 SID Change 修改
查看>>
看看来自日本的扫描,做网站需要注意的
查看>>
JDK 1.7+Android SDK+IntelliJ IDEA 13+Genymotion 安卓开发环境部署
查看>>
钓鱼邮件***防范指南
查看>>
session_start()放置位置的不正确引发的ROOT常量 未定义的错误
查看>>
如何设定VDP同时备份的任务数?
查看>>