微信小程序开发 -- 01
微信小程序开发基础 -- 开发前的准备
缘由
1月9日张小龙微信小程序正式上线,因为微信,所以小程序从诞生开始就头戴巨大的光环,很多的团队,公司以及开发的个体都眼巴巴的盯着这个小程序。而那个时候我却在全力以赴的研究node,所以也没有仔细的研究这个风风火火的小程序。本以为此生无甚交集,但是最近公司却准备开发小程序,而我也"幸运"的被选中......
小程序上线有有一段时间了,虽然还是在不断的更新,但是却大体趋于稳定,网上也积累了一定的教程和帖子,所以在研究了一下之后也就决定将自己学习小程序的一些过程记录在博客中,以供他人参考。
什么是微信小程序
微信小程序(weixinxiaochengxu),简称小程序,缩写XCX,英文名mini program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。
全面开放申请后,主体类型为企业、政府、媒体、其他组织或个人的开发者,均可申请注册小程序。小程序、订阅号、服务号、企业号是并行的体系。
2017年1月9日,张小龙在2017微信公开课Pro上发布的小程序正式上线。
发展历程
2016年9月21日,微信小程序正式开启内测。在微信生态下,触手可及、用完即走的微信小程序引起广泛关注。腾讯云正式上线微信小程序解决方案,提供小程序在云端服务器的技术方案。
2016年1月11日,微信之父张小龙时隔多年的公开亮相,解读了微信的四大价值观。张小龙指出,越来越多产品通过公众号来做,因为这里开发、获取用户和传播成本更低。拆分出来的服务号并没有提供更好的服务,所以微信内部正在研究新的形态,叫「微信小程序」。
2017年1月9日0点,万众瞩目的微信第一批小程序正式低调上线,用户可以体验到各种各样小程序提供的服务。
小程序核心理念
具备明星光环的小程序,如果在百度里面查找相关的资料以及介绍,是非常容易的。但是在众多理念中,我认为最为核心的理念应该就是一句__用完即走__。
那么什么是用完即走呢?
非常简单,当需要的时候,不需要下载动则几十兆的app,也不需要进行过多复杂的操作,打开微信,开启小程序,直接使用。而用完直接退出,不用顾虑它是否会过多的占用你手机宝贵的内存。
给人的感觉有点像叫车一样,需要的时候一个预定,车就来了,到达了目的地,下车,再见。
开发
与其他语言开发动不动就要配置环境,下载一些插件软件安装包等等的复杂项目构建不同,小程序的开发非常简单,直接点击https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1496882410 根据不同的系统选择开发工具进行下载,而软件的安装也完全是傻瓜式安装,不存在什么需要注意的点。软件安装好之后,图标如下:

如果你成功的安装好了开发工具,那么恭喜你,你已经搭建好了所有的开发环境,怎么样,简单吧。
而软件的内部操作界面如下:

无论是调试还是代码的编辑还是查看代码的运行仅需要这个开发工具就已经足够了。
账号的注册
当我们开发微信小程序的时候,需要使用appId,用来验证身份,所以就需要注册账号。
点击这里 https://mp.weixin.qq.com/ 即可进行账号的注册和登陆。

在页面的右上角点击立即注册,既可以进行注册
进入注册页面后选择小程序。

点击小程序模块进入后,输入基础信息进行注册

三步:账号信息 - 邮箱激活 - 信息登记

注册完成后重新进行登陆。
输入账号密码后使用绑定的微信号扫描二维码即可进入如下网页:

在左边选择设置,可以找到开发AppID。

项目创建
我们需要通过开发者工具,来完成小程序创建和代码编辑。
开发者工具安装完成后,打开并使用微信扫码登录。选择创建“项目”,填入上文获取到的 AppID ,设置一个本地项目的名称(非小程序名称),比如“我的第一个项目”,并选择一个本地的文件夹作为代码存储的目录,点击“新建项目”就可以了。

为方便初学者了解微信小程序的基本代码结构,在创建过程中,如果选择的本地文件夹是个空文件夹,开发者工具会提示,是否需要创建一个 quick start 项目。选择“是”,开发者工具会帮助我们在开发目录里生成一个简单的 demo。

项目创建成功后,我们就可以点击该项目,进入并看到完整的开发者工具界面,点击左侧导航,在“编辑”里可以查看和编辑我们的代码,在“调试”里可以测试代码并模拟小程序在微信客户端效果,在“项目”里可以发送到手机里预览实际效果。
点击编辑既可以对代码进行编辑。如果需要调整编辑器字体等相关内容,可以点击左上角的设置。

微信小程序开发 -- 01的更多相关文章
- 微信小程序开发01 --- 微信小程序项目结构介绍
一.微信小程序简单介绍: 微信官方介绍微信小程序是一个不需要下载安装就可使用(呵呵,JS代码不用下载吗?展示的UI不用下载吗?)的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用. ...
- 微信小程序开发 [01] 小程序基本结构和官方IDE简介
1.小程序账户注册 实际上在进行开发时没有注册小程序账户也是可以的,官方提供的IDE提供实时编译模拟预览,和当前你有没有绑定小程序账户没有关系. 当然,最终你要正式上线你的小程序的话,肯定还是需要账户 ...
- 微信小程序开发笔记01
微信小程序开发的优势 1,不用安装,即开即用,用完就走.省流量,省安装时间,不占用桌面: 2,体验上虽然没法完全媲美原生APP,但综合考虑还是更优: 3,对于小程序拥有者来说,开发成本更低,他们可以更 ...
- 微信小程序开发之模板消息
一.添加模板 登录https://mp.weixin.qq.com获取模板,如果没有合适的模板,可以申请添加新模板,审核通过后可使用,详见模板审核说明 页面的 <form/> 组件,属性r ...
- 零基础入门微信小程序开发
注:本文来源于:<零基础入门微信小程序开发> 课程介绍 本达人课是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件.页面样式文件.Ja ...
- 微信小程序开发-入门到熟练(wepy-初级篇)
Title:最近做完了项目,review代码的同时,就想写一篇详细的小程序开发经历,记录自己的项目从0到1的过程 Desc : 小程序从0到1,从小白到完成项目,你需要这样做: step1: 基础知识 ...
- 微信小程序开发心得
微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司 ...
- 【微信小程序开发•系列文章六】生命周期和路由
这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...
- 微信小程序开发日记——高仿知乎日报(下)
本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...
随机推荐
- JS理解之闭包
首先,闭包是什么?这个问题,百度上一大堆,然后我也是,现在学的有点累,来回顾一下吧算是,懂的自动略过,小弟不才,道行入不了你们法眼. 我认为的闭包是,就是取到,不是在自己作用域内或者按照js的规则,娶 ...
- commitProperties方法
自定义的组件,如果重写commitProperties方法,那么在该方法内部一定要注意super.commitProperties()的调用.
- LinkBar选中项字体颜色
通过控制disabledColor样式来控制,选中项字体的颜色.
- 在Ueditor / Umeditor中实现上传图片跨域
近几天公司的后台管理需要图文编辑文章,但是ueditor提供的方法中,本地图片的上传是通过flash的方式处理的,且不支持跨域.若要在已经前后端分离的Angular项目中使用,需要做复杂的环境配置.跟 ...
- poj1269计算几何直线和直线的关系
We all know that a pair of distinct points on a plane defines a line and that a pair of lines on a p ...
- 根据优先关系矩阵使用逐次加一发构造优先函数(Java)
若已知运算符之间的优先关系,可按如下步骤构造优先函数: 1.对每个运算符a(包括#在内)令f(a)=g(a)=1 2.如果a⋗b且f(a)<=g(b)令f(a)=g(b)+1 3.如果a⋖b且f ...
- jQuery选择器---基本选择器总结
今天要跟大家分享一下jQuery选择器的使用方法,它的选择器分为四大类 如图: 基本选择器的使用: 1.id选择器 案例: <div id="notMe"><p& ...
- 下拉菜单制作——利用CSS实现的一个实例
本文实现了一个经典的下拉菜单的制作. 首先,写出Html部分: <!DOCTYPE html> <html> <head> <meta charset=&qu ...
- Java内存模型四
volatile的特性 当我们声明共享变量为volatile后,对这个变量的读/写将会很特别.理解volatile特性的一个好方法是:把对volatile变量的单个读/写,看成是使用同一个锁对这些单个 ...
- 一次基于Vue.Js用户体验的优化
.mytitle { background: #2B6695; color: white; font-family: "微软雅黑", "宋体", "黑 ...