微信小程序 --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的更多相关文章
- 使用wepy开发微信小程序01——常用的组件
1.axio.js 'use strict' import axios from 'axios' import wepyAxiosAdapter from 'wepy-plugin-axios/dis ...
- 微信小程序开发 -- 01
微信小程序开发基础 -- 开发前的准备 缘由 1月9日张小龙微信小程序正式上线,因为微信,所以小程序从诞生开始就头戴巨大的光环,很多的团队,公司以及开发的个体都眼巴巴的盯着这个小程序.而那个时候我却在 ...
- 微信小程序开发01 --- 微信小程序项目结构介绍
一.微信小程序简单介绍: 微信官方介绍微信小程序是一个不需要下载安装就可使用(呵呵,JS代码不用下载吗?展示的UI不用下载吗?)的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用. ...
- 微信小程序--家庭记账本开发--01
微信小程序的开发准备与开发工具的学习 在这次寒假伊始,临近春节,学习进程有所拉下,现在补上.寻找了好多网站的相关学习视频,包括微信公众平台关于小程序这方面也有好多相关资料供查阅. 1.开发准备: 首先 ...
- 微信小程序实战[01]
接触微信小程序也有一段时间了,以天气预报练一下手. 主要实现了以下功能: (1) 首页图标式菜单,便于以后扩展功能 (2)首页顶部滚动消息 (3)页面右上角三点菜单转发功能,便于小程序的传播 (4)天 ...
- 微信小程序开发笔记01
微信小程序开发的优势 1,不用安装,即开即用,用完就走.省流量,省安装时间,不占用桌面: 2,体验上虽然没法完全媲美原生APP,但综合考虑还是更优: 3,对于小程序拥有者来说,开发成本更低,他们可以更 ...
- 微信小程序的开发——01小程序的执行流程是怎样的?
作者:叶小钗 转载至:https://www.cnblogs.com/yexiaochai/p/9346043.html 我们这边最近一直在做基础服务,这一切都是为了完善技术体系,这里对于前端来说便是 ...
- 小程序01 微信小程序介绍和开发准备
前言 火爆的微信小程序:跳一跳.摩拜单车.美柚.大众点评.滴滴出行 背景 为什么会有小程序? 微信最早推出公众号和服务号,公众号和服务号所传播的网页经常出现加载缓慢甚至页面空白的情况. 微信小程序的诞 ...
- 微信小程序-饮食日志_开发记录01
今天主要了解微信小程序的框架结构以及环境部署等. 小程序的框架主要分为: js.json.wxss.wxml等 和java web的内容相似,主要了解内部代码的使用情况和语言方式. 主要写了页面的框架 ...
随机推荐
- sklearn_PCA主成分降维
# coding:utf-8 import pandas as pd import numpy as np from pandas import Series,DataFramefrom sklear ...
- mysql高可用架构 -> MHA简介-01
作者简介 松信嘉範:MySQL/Linux专家2001年索尼公司入职2001年开始使用oracle2004年开始使用MySQL2006年9月-2010年8月MySQL从事顾问2010年-2012年 D ...
- ubuntu 16.04 网卡配置 虚拟机上网
看所有网卡(包括未启动的) ifconfig -a 或者 ip link 查看当前网卡配置,打开配置文件/etc/network/interfaces 设置静态IP(dhcp 为动态获取,static ...
- Ibatis.Net 各类的作用说明学习(三)
Ibatis中,加载.分析配置及映射文件是在创建SqlMapper实例的时候进行的,另外对数据库的操作,也是在SqlMapper实例上调用方法来完成.创建SqlMapper的实例的方式是: ISqlM ...
- find命令的使用
在以.conf结尾的文件里面查找含有aaa字符串的那一行 ( -name后面可以写 "*.*" 即匹配所有的文件 ) find / -name "*.conf& ...
- 洛谷P1120 小木棍(升级版)
传送门啦 一道经典的搜索剪枝题,不废话,步入正题. 分析: 一.输入时手动过滤不合法的情况 二.很明显我们要枚举把哪些棍子拼接成原来的长棍,而原始长度(原来的长棍的长度)都相等,因此我们可以在 $ d ...
- hibernate cascade
默认:none Cascade 属性值: none:在保存.删除修改对象的时候,不考虑其附属物的操作 save-update:在保存.更新当前对象时,级联保存.更新附属物. delete:在删除当前对 ...
- Java 容器的打印
Java容器类库中的两种主要类型,它们的区别在于容器中每个"槽"保存的元素个数 Clollection容器只能在保存一个元素,此类容器包括: List,它以特定顺序保存一组元素 S ...
- 微信小程序地图模块
微信小程序的地图模块官方提供的API比较少,详情请见 官方文档 以下为一个示例 <!--pages/location/locati ...
- vue 插槽slot
本文是对官网内容的整理 https://cn.vuejs.org/v2/guide/components.html#编译作用域 在使用组件时,我们常常要像这样组合它们: <app> < ...