微信小程序开发学习笔记(一)——概要、安装开发环境与第一个小程序

一、概要

小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载。

微信小程序是腾讯于2017年1月9日推出的一种不需要下载安装即可在微信平台上使用的应用,主要提供给企业、政府、媒体、其他组织或个人的开发者在微信平台上提供服务。

截止2019年初,微信小程序用户规模突破6亿,小游戏类微信小程序占比达28%。

帮助文档https://developers.weixin.qq.com/miniprogram/dev/framework/   这里有最全的学习资料

1.1、小程序简介

提起⼩程序,⼤家⾸先想到的就是腾讯的微信⼩程序,其实,⼩程序不⽌这⼀家,只是腾讯的微信⼩程序推出的较早。⽬前,⼩程序群雄逐⿅,BAT【指百度公司(Baidu)、阿⾥巴巴集团(Alibaba)、腾讯公司(Tencent)】BAT都已完成了⼩程序的布局。腾讯的微信⼩程序 2017年1⽉9⽇正式上线,阿⾥巴巴的⽀付宝⼩程序 2017年9⽉20⽇正式上线,百度智能⼩程序 2018年7⽉4⽇正式 上线。字节跳动旗下的今⽇头条⼩程序2018年11⽉17⽇正式上线,随后推出抖⾳⼩程序。他们都推出了⾃⼰的开发⼯具。

微信小程序是一种不用下载就能使用的应用,也是一项创新,经过将近两年的发展,已经构造了新的微信小程序开发环境和开发者生态。微信小程序也是这么多年来中国IT行业里一个真正能够影响到普通程序员的创新成果,已经有超过150万的开发者加入到了微信小程序的开发,与我们一起共同发力推动微信小程序的发展,微信小程序应用数量超过了一百万,覆盖200多个细分的行业,日活用户达到两个亿,微信小程序还在许多城市实现了支持地铁、公交服务。微信小程序发展带来更多的就业机会,2017年小程序带动就业104万人,社会效应不断提升

 

 

1.2、发展历史

随着网络的不断发展和更多高性价比智能手机的普及,以及人们对工作、生活、娱乐等多方面的需求日益增长,各种移动应用程序App(英文全称为 Application)应运而生。当太多App占满用户的手机屏幕和内存时,手机就容易出现内存容量紧张和运行速度变慢的情况。同时,App的升级和下载本身也在消耗手机带宽和系统资源,致使App的日益丰富与手机运行速度之间的矛盾日渐加重。 针对此矛盾,各大移动应用厂商提出了各自的解决方案。2013年8月22日,百度正式在百度世界大会上首先提出“轻应用”(Lght App)的概念。百度将轻应用定义为一种无须下载、即搜即用的全功能App,既有媲美本地原生App(Native App)的用户体验,又具备Web App可被检索与智能分发的特性。后续UC开放平台、支付宝公众平台等类似轻应用平台相继发声。这些平台都是基于HTML5(超文本标记语言的第五次重大修改,简称H5)推出的Web App,但是由于未形成账号体系、不符合用户习惯等,用户使用率较低,活跃度较低,这些平台并没有发展起来。 

1.3、小程序的诞生

2016年,微信之父张小龙意识到微信解决以上问题有重大的潜在商业价值,可以围绕庞大的微信用户入口,构建一个应用生态闭环。2016年1月11日,张小龙透露将在订阅号和服务号外新设微信“应用号”。经过一年多的开发,2017年1月9日,张小龙在2017年微信公开课Pro上宣布的小程序正式上线。 自2016年9月22日开始内测到2018年年初,在一年多的时间里,小程序的功能经过快速的优化迭代,培养了大量用户。根据2018年1月15日微信公开课数据,目前小程序日活跃用户数已达1.7亿户、已上线小程序58万个,覆盖100万开发者、2300个第三方平台。上线不足一个月的小游戏“跳一跳”累计用户达3.1亿户,跃居小程序使用榜首,用户次日留存(次日仍然登录使用)率达到65%。

1.4、为什么需要小程序开发

假定要做一个美团的:美团优选应用,有下面的选择:

1、原生app(Native App)

缺点:

开发成本高,android,ios,web,pc

开发周期长

需要下载安装,推广麻烦

更新麻烦,版本1,版本2,版本3,用户都需要下载后再安装

优点:

灵活、用户体验好

可能调用底层服务

适合大公司,大企业,大投资

2、混合式APP(Hybird app)

优点:可以实现一次开发,在多个平台上运行如android,ios等,开发周期相对原生app要短一些

缺点:原生app中存在的缺点基本都有,除了第一项

3、Web app

优点:开发速度快,成本低,跨平台,无需安装,好推广

缺点:体验较差,不便于调用底层服务

4、小程序

开发小程序的原因有很多,主要包括以下几点:

便捷性:小程序可以直接在即时通讯软件、社交平台或者浏览器中运行,用户无需下载安装即可

使用,减少了安装和卸载的时间,提高了用户体验。

节省空间:与传统的APP相比,小程序占用的存储空间较小,减轻了用户手机存储负担。

快速传播:用户可以通过分享、扫码等方式快速传播小程序,提高了推广效果和覆盖面。

开发成本低:相较于传统APP,小程序的开发成本较低,同时跨平台特性使得开发者无需针对不同操作系统进行多次开发。

系统集成:许多平台(如微信、支付宝等)提供了丰富的API接口,使得小程序可以方便地与平台的其他功能进行集成,为用户提供更多便利。

适应性强:小程序可以适应各种行业和场景,满足个性化和多样化的需求。

小程序有很多类型,以下是一些常见的小程序:

电商购物类:如拼多多、京东购物等,用户可以在小程序中完成购物、支付、物流查询等功能。

生活服务类:如美团外卖、滴滴打车等,用户可以通过小程序预订餐饮、叫车等服务。

娱乐休闲类:如抖音短视频、网易云音乐等,用户可以在小程序中观看视频、收听音乐等。

教育培训类:如新东方在线、作业帮等,提供在线课程、辅导等教育资源。

金融理财类:如蚂蚁财富、招商银行等,用户可以在小程序中进行投资理财、查询账户等操作。

工具类:如搜狗输入法、滴答清单等,提供各种实用工具功能。

这些仅仅是小程序的一部分类型,实际上小程序已经渗透到各个行业和领域,为用户提供了便捷的线上服务

  很多人做微信公众号,而非App,因为App推广成本太高。这导致公众号现在更像是媒体化的平台。微信的本意是要提供服务,所以推出了服务号,但是服务号也没达到预期。微信小程序的优势:

  一是微信有海量用户,而且粘性很高,在微信里开发产品更容易触达用户;

  二是推广app 或公众号的成本太高。

  三是开发适配成本低。

  四是容易小规模试错,然后快速迭代。

  五是跨平台。

  事实上,应用号并非微信首创,之前百度推出过应用号,搜狐推出过快站,但腾讯将这件事情做成功的概率却是最大

1.5、示例

1.6、小程序与普通网页开发的区别

1.运行环境不同:网页运行在浏览器中,小程序运行在微信环境中;

2.API不同:由于运行环境不同,小程序无法调用DOM和BOM的API

3.开发模式不同:网页开发:浏览器+代码编辑器,小程序:申请小程序开发账号+安装小程序开发者工具+创建和配置小程序项目

二、环境配置

2.1、注册小程序帐号

首先我们要去注册微信小程序帐号

官网:https://mp.weixin.qq.com

第一步:点击立即注册

    选择微信小程序

第二步:依次填写个人信息

第三步:信息登记中,主体类型选择个人,然后在依次填写主体信息登记

至此,我们的微信小程序测试号就注册完成了! 

2.2、获取微信小程序的AppID

登录我们刚刚注册的测试号,选择开发管理,点击开发设置即可看到自己的AppID

2.3、下载安装微信开发者工具

推荐下载和安装最新的稳定版Stable Build的微信开发者工具

链接:微信开发者工具下载地址与更新日志 | 微信开放文档 (qq.com)

 安装小程序就建议一直next

 

如果出现如下报错,就按照提示添加环境变量即可

 修改环境变量

三、第一个小程序

3.1、创建第一个小程序项目 

第一步:点击加号后,输入我们的项目名称,文件目录,输入我们的AppID后,选择不使用云开发,然后点击确定

 

至此,我们的第一个微信小程序就创建成功!

然后呢,我们可以点击预览,通过我们当前账号的微信扫一扫,在手机上查看我们刚刚创建的小程序

 

 扩展:修改主体颜色,点击小齿轮,选择外观,即可修改

3.2、小程序项目的基本组成结构

我们可以点击左上角的三个选项来控制当前我们需要展示那些页面

项目目录结构:

pages:用来存放所有小程序的页面

utils:用来存放工具性质的模块(例如:格式化时间的自定义模块)

app.js:小程序项目的入口文件

app.json:是当前小程序的全局配置,包括了小程序的所有页面路径、窗口外观、界面表现、底部 tab等

app.wxss:小程序项目的全局样式文件

project.config.json:项目的配置文件

sitemap.json:用来配置小程序及其页面是否允许被微信索引

页面目录结构:

.js文件(页面的脚本文件,存放页面的数据、事件处理函数等)

.json文件(当前页面的配置文件,配置窗口的外观、表现等)

.wxml文件(页面的模板结构文件)

.wxss文件(当前页面的样式表文件)

3.3、小程序配置的使用

一:app.json

1、pages:用来记录当前小程序的所有页面的路径

2、window:全局定义小程序所有页面的背景色、文字颜色等

3、style:全局定义小程序组件所使用的样式版本,v2代表使用全新的样式

4、sitemapLocation:用来指明sitemap.json的位置

二:project.config.json

1、setting:中保存了编译相关的配置

2、projectname:中保存的是项目名称

3、appid:中保存的是小程序的账号ID

三:sitemap.json

微信现已开放小程序内搜索,效果类似于PC网页的SEO。sitemap.json文件用来配置小程序页面是否允许微信索引。
当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引。当用户的搜索关键字和页面的索引匹配成功的时候,小程序的页面将可能展示在搜索结果中。

默认是允许被索引的,page:*表示所有的页面

如果我们想不被微信索引到的话,我们跨域在action中加上dis

如图所示:

 

3.4、小程序代码的构成

  • 项目的组成结构
    在这里插入图片描述
    pages: 用来存放所有小程序的页面
    utils: 用来存放工具性质的模块
    app.js:小程序项目的吐口文件
    app.json:小程序项目的全局配置文件
    app.wxss: 全局样式文件
    project.config.json 项目的配置文件
    sitemap.json 用来配置小程序及其页面是否允许被微信搜索

  • 小程序页面(pages)的组成部分
    在这里插入图片描述
    在pages 文件夹下,一个文件存放一个页面。每个页面由四个基本文件组成
    .js 文件: 页面的脚本文件,存放页面的数据,处理函数等
    .json文件:当前页面的配置文件,配置窗口的外观,表现
    .wxml文件: 页面的模板结构文件
    .wxss文件: 页面的样式表文件

  • app.json
    app.json 是小程序的全局配置。包括了小程序的所有页面路径,窗口外观,界面表现,底部tab等
    在这里插入图片描述
    pages: 用来记录当前小程序的所有页面的路径
    windows: 全局定义小程序所有页面的背景色,文字颜色等
    style: 全局定义小程序组件所使用的样式版本
    sitemapLocation: 用来指明sitemap.json 的位置

3.5、简单配置

详细介绍:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

app.json

{
  "pages": [
    "pages/index/index",
    "pages/hello/index",
    "pages/counter/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#f00",
    "navigationBarTitleText": "欢迎您",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#00f",
    "selectedColor": "#f00",
    "list":[
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/icon/shouye.png",
        "selectedIconPath": "images/icon_selected/shouye.png"
      },
      {
        "pagePath": "pages/hello/index",
        "text": "欢迎",
        "iconPath": "images/icon/chat.png",
        "selectedIconPath": "images/icon_selected/chat.png"
        
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "images/icon/rizhi.png",
        "selectedIconPath": "images/icon_selected/rizhi.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

运行结果:

四、作业

(1)、完成微信小程序帐号的注册

(2)、搭建好开发环境

(3)、创建自己的第一个微信项目,并预览

五、视频

【微信小程序开发】 https://www.bilibili.com/video/BV1pv4y1n7Zg/?share_source=copy_web&vd_source=475a31f3c5d6353a782007cd4c638a8a

posted @ 2023-04-18 11:40  张果  阅读(559)  评论(0编辑  收藏  举报
AmazingCounters.com