微信小程序开发笔记(一)
一、为什么要学习微信小程序开发
微信小程序是一个可以在微信上打开的轻应用,他是由多个页面组成的程序,跟传统APP比较如下:
优点
1、不需要在应用商店下载,不占用内存空间,即开即用
2、可以在微信内直接打开使用,方便透过微信传播分享,有许多API可以很方便的调用(例如微信支付)
3、开发成本低,微信提供了一整套的开发者工具和云数据库,不需要再另外搭环境和安装中间件
缺点
1、需要在微信小程序限定的框架内搭建,小程序有自己的编程语言,需要时间熟悉
2、功能和性能方面有明显的上限,无法做功能复杂的软件,小程序运行流畅度不算太好
从上面看来,小程序比较适合在一些简单场景下使用,例如我们到餐厅点餐就很适合,因为用户不需要再去下载一个APP,而且付款可以直接使用微信付款,相当方便。而前一阵子很流行的跳一跳也是,用户不需要去下载游戏,直接打开就可以玩,还可以透过微信接口可以看到朋友的战绩,透过微信传播也让他的热度一下增长了许多。在合适的应用场景下,微信小程序提供了非常多的优势,这也是我们为什么要学小程序的开发
二、准备步骤
1、注册账号
首先先去微信公众平台注册账号
https://mp.weixin.qq.com
里面有一整套很完整的注册流程,就不展开说明了。
2、下载开发者工具
接着再去下载开发者工具(https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html),开发者工具提供了一整套工具,包含模拟器、编辑器、调试器,非常的方便,详细的使用方式可以直接看官方文档。
3、开启云管理平台
强烈推荐开启,微信提供了一定额度的免费云储存空间,可以储存数据库、文档,还可以查看APP的运营情况,报表统计之类的,不需要自己再搭建一个后台。
这边要注意的是开启后需要在app.json里面添加"cloud":true再刷新。
4、阅读官方开发文档
https://developers.weixin.qq.com/ebook?action=get_post_info&docid=0008aeea9a8978ab0086a685851c0a
文档有点长,需要大概花5-6小时来阅读,由于微信小程序在前端的WXML、WXSS与传统的HTML+CSS有很大的不同,需要先了解其差异,才能比较好的把页面写出来,再来是控制方面,虽然都是用JS,但微信小程序将逻辑层与渲染层分开,执行如下图。

5、熟悉开发者工具
开发者工具有4个主要的模块,如下图,分别是模拟器、编辑器、调试器和云管理平台,前面用的比较多的会是模拟器和编辑器。

在编辑器的资料夹内,有三个文档,如下图,app.js是对整个小程序的JS逻辑编译,app.json是对小程序的配置做一些设定,app.wxss是对小程序的画面做全局的渲染。

在app.json里面我们可以创建新的页面,新的页面会在page资料夹显示,每个新创的页面会包含了四个文件

跟app里面的一样,多出的wxml就是小程序的页面显示,类似于html文档,wxss对应css。了解这些基础的架构后就可以开始进行小程序的编辑了,下一篇文章我们会简单的编辑一个小程序让大家了解整个流程。
微信小程序开发笔记(一)的更多相关文章
- 微信小程序开发笔记02
今天学习了微信小程序开发用到的语言,wxml与wxss语言基本语法与html和css基本语法相似,学习起来相对简单.在小程序主要的语言是js(javascript,跟准确的说是jqery) ,由于这种 ...
- 微信小程序开发笔记01
微信小程序开发的优势 1,不用安装,即开即用,用完就走.省流量,省安装时间,不占用桌面: 2,体验上虽然没法完全媲美原生APP,但综合考虑还是更优: 3,对于小程序拥有者来说,开发成本更低,他们可以更 ...
- 微信小程序开发笔记
前言: 因为前段时间一直在做关于微信小程序方面的项目,作为一名后端的攻城狮而言做一些简单的前端页面数据操作和管理还是比较容易快上手的,当然前提是要理解微信小程序的基本语法和请求原理.该篇博客主要记录的 ...
- 微信小程序开发笔记04
今天将小程序的页面进行优化 消除昨天遇到的bug问题. 完成了微信小程序的开发.
- 微信小程序开发笔记(二)
一.前言 继承上一篇所说的,有了对微信小程序的基础概念后,这边将会示范动手做一个小程序,在动手的过程中我们可以更快的熟悉小程序里面的架构和开发流程. 二.小程序的设计 这次要做的是一个猜数字的程序,程 ...
- 微信小程序开发笔记03
今天基本实现了微信小程序主要功能,页面还没有进行优化,有些功能还需完善. 页面之间的信息转化部分还未实现.
- 微信小程序开发笔记2,底部导航栏tablebar
底部导航(要在app.js里面配置,也就是把导航的代码写到app.js) 官方文档说最少2个导航最多5个 , "tabBar": { "color": &quo ...
- 微信小程序开发笔记1,认识小程序的项目构成
省去安装和基本操作, app.js脚本文件 qpp.json配置文件(添加删除页面,都要在这个文件下修改入口配置) app.wxss样式表文件 app前缀为全局的 在app.json中配置项目的每个页 ...
- 微信小程序开发:学习笔记[7]——理解小程序的宿主环境
微信小程序开发:学习笔记[7]——理解小程序的宿主环境 渲染层与逻辑层 小程序的运行环境分成渲染层和逻辑层. 程序构造器
随机推荐
- 如何查看redis内存使用情况
https://jingyan.baidu.com/article/2c8c281dbd079f0008252a0f.html Redis 是一个开源(BSD许可)的,内存中的数据结构存储系统,它可以 ...
- 基于jquery读取input上传的文件内容
<script src="/static/js/jquery.js"></script> // 前端页面实现头像预览 // 当用户选中文件之后,也就是头像的 ...
- [转]Node.js中package.json中^和~的区别
webpack 项目的package.json 文件列出了项目所依赖的插件和库,同时也给出了对应的版本说明,但是在版本说明前面还有个符号:'^'(插入符号)和'~'(波浪符号),总结了下他们之间的区别 ...
- git提交时如何忽略一些文件
起因 在使用git对软件进行版本管理的时候我们总有一些不需要提交到版本库里的文件和文件夹,或者在管理一个实际应用的开源项目的时候,不可以把带有数据库信息的文件上传到开源平台当中,这个时候我们就需要让g ...
- 【50.00%】【codeforces 747C】Servers
time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...
- 如何在很短的时间内将大量数据插入到ConcurrentHashMap(转)
将大批量数据保存到map中有两个地方的消耗将会是比较大的:第一个是扩容操作,第二个是锁资源的争夺.第一个扩容的问题,主要还是要通过配置合理的容量大小和扩容因子,尽可能减少扩容事件的发生:第二个锁资源的 ...
- 浅谈vue $mount()
Vue 的$mount()为手动挂载,在项目中可用于延时挂载(例如在挂载之前要进行一些其他操作.判断等),之后要手动挂载上.new Vue时,el和$mount并没有本质上的不同. 具体见代码: 顺便 ...
- promise 讲解
Promise的出现 解决了 js 回调地狱得问题 回调地狱图 Promise解决回调地狱 是不是美观多了.. 实例化Promise时传入方法里的两个参数 resolve(成功的回调)和reject ...
- hdu 6852Path6(最短路+最小割)
传送门 •题意 有n个城市,标号1-n 现花费最小的代价堵路 使得从1号城市到n号城市的路径边长 (注意只是变长不是最长) 堵一条路的代价是这条路的权值 •思路 在堵路以前,从1到n的最小路径当然是最 ...
- <Codeforce>1082A. Vasya and Book
题目描述: Vasya is reading a e-book. The file of the book consists of nn pages, numbered from 11 to nn. ...