微信小程序开发基础 -- 开发前的准备

缘由

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的更多相关文章

  1. 使用wepy开发微信小程序01——常用的组件

    1.axio.js 'use strict' import axios from 'axios' import wepyAxiosAdapter from 'wepy-plugin-axios/dis ...

  2. 微信小程序开发 -- 01

    微信小程序开发基础 -- 开发前的准备 缘由 1月9日张小龙微信小程序正式上线,因为微信,所以小程序从诞生开始就头戴巨大的光环,很多的团队,公司以及开发的个体都眼巴巴的盯着这个小程序.而那个时候我却在 ...

  3. 微信小程序开发01 --- 微信小程序项目结构介绍

    一.微信小程序简单介绍: 微信官方介绍微信小程序是一个不需要下载安装就可使用(呵呵,JS代码不用下载吗?展示的UI不用下载吗?)的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用. ...

  4. 微信小程序--家庭记账本开发--01

    微信小程序的开发准备与开发工具的学习 在这次寒假伊始,临近春节,学习进程有所拉下,现在补上.寻找了好多网站的相关学习视频,包括微信公众平台关于小程序这方面也有好多相关资料供查阅. 1.开发准备: 首先 ...

  5. 微信小程序实战[01]

    接触微信小程序也有一段时间了,以天气预报练一下手. 主要实现了以下功能: (1) 首页图标式菜单,便于以后扩展功能 (2)首页顶部滚动消息 (3)页面右上角三点菜单转发功能,便于小程序的传播 (4)天 ...

  6. 微信小程序开发笔记01

    微信小程序开发的优势 1,不用安装,即开即用,用完就走.省流量,省安装时间,不占用桌面: 2,体验上虽然没法完全媲美原生APP,但综合考虑还是更优: 3,对于小程序拥有者来说,开发成本更低,他们可以更 ...

  7. 微信小程序的开发——01小程序的执行流程是怎样的?

    作者:叶小钗 转载至:https://www.cnblogs.com/yexiaochai/p/9346043.html 我们这边最近一直在做基础服务,这一切都是为了完善技术体系,这里对于前端来说便是 ...

  8. 小程序01 微信小程序介绍和开发准备

    前言 火爆的微信小程序:跳一跳.摩拜单车.美柚.大众点评.滴滴出行 背景 为什么会有小程序? 微信最早推出公众号和服务号,公众号和服务号所传播的网页经常出现加载缓慢甚至页面空白的情况. 微信小程序的诞 ...

  9. 微信小程序-饮食日志_开发记录01

    今天主要了解微信小程序的框架结构以及环境部署等. 小程序的框架主要分为: js.json.wxss.wxml等 和java web的内容相似,主要了解内部代码的使用情况和语言方式. 主要写了页面的框架 ...

随机推荐

  1. c++ ACM常用函数

    1 保留小数点后两位 #include <iomanip> cout << setiosflags(ios::fixed) << setprecision(2)&l ...

  2. console.dir() 与 console.dirxml() 的使用

    在调试JavaScript程序时,有时需要dump某些对象的详细信息.通过手工编写JavaScript代码可以完成这一工作:针对对象的属性进行循环,将循环到的每一个属性值打印出来:可见,这一过程是比较 ...

  3. 2016.6.18——Implement strStr()

    Implement strStr() 本题收获: 1.考虑多种边界条件. 2.haystack.size() size_type 是无符号的,即为正数 在32位系统上定义为 unsigned int ...

  4. java后台中处理图片辅助类汇总(上传图片到服务器,从服务器下载图片保存到本地,缩放图片,copy图片,往图片添加水印图片或者文字,生成二维码,删除图片等)

    最近工作中处理小程序宝箱活动,需要java画海报,所以把这块都快百度遍了,记录一下处理的方法,百度博客上面也有不少坑! 获取本地图片路径: String bgPath = Thread.current ...

  5. 【codeforces】【比赛题解】#872 CF Round #440 (Div.2)

    链接. [A]寻找漂亮数字 题意: 给定了两列非零数字.我们说一个数是漂亮的,当它的十进制表达中有至少一个数从数列一中取出,至少有一个数从数列二中取出.最小的漂亮数字是多少? 输入: 第一行两个数\( ...

  6. 源码安装postgresql数据库

    一般情况下,postgresql由非root用户启动. 1.创建postgres用户 groupadd postgres useradd -g postgres postgres 下面的操作都在pos ...

  7. rsync本地及远程复制备份【原创】

    1.安装rsyncyum instsall rsync 2.本地复制 rsync -auq --progress --delete /tongbu1/ /tongbu2/ rsync -auq --p ...

  8. MsSqlserver 查看锁表与解锁

    查看被锁表: select request_session_id spid,OBJECT_NAME(resource_associated_entity_id) tableName from sys. ...

  9. mysql高可用架构 -> MHA环境准备-02

    环境准备 环境检查(三个测试节点的环境都应该是一样的,只有ip不同) [root@db01 bin]# cat /etc/redhat-release //系统版本 CentOS Linux rele ...

  10. Runtime.getRuntime().exec 类 防止阻塞

    import java.io.BufferedInputStream; import java.io.BufferedReader; import java.io.IOException; impor ...