初学微信小程序

1.微信小程序介绍

打开微信小程序官方开发文档
在这里插入图片描述
微信小程序,简称小程序,英文名 Mini Program ,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用


1.1为什么是微信小程序?

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

  2. 推广app或公众号的成本太高

  3. 开发适配成本低

  4. 容易小规模试错,然后快速迭代

  5. 跨平台
    1.2微信小程序历史

  • 2016年1月11日,微信之父张小龙时隔多年的公开亮相,解读了微信的四大价值观。张小龙指出,越来越多产品通过公众号来做,因为这里开发、获取用户和传播成本更低。拆分出来的服务号并没有提供更好的服务,所以微信内部正在研究新的形态,叫微信小程序
    需要注意的是,之前是叫做应用号
  • 2016年9月21日,微信小程序正式开启内测。在微信生态下,触手可及,用完即走的微信小程序引起广泛关注。腾讯云正式上线微信小程序解决方案,提供小程序在云断服务器的技术方案。
  • 2017年1月9日,微信推出的“小程序”正式上线。“小程序”是一种无需安装,即可使用的手机“应用”。不需要像往常一样下载App,用户在微信中“用完即走”。
    1.3疯狂的微信小程序
  1. 微信月活已经达到10.82亿.其中55岁以上的用户也达到6300万
  2. 消息传达数达到450亿,较去年增长18%视频通话4.1亿次 增长100%
  3. 小程序覆盖超过200+行业,交易增长超过6倍,服务1000亿+人次,创造出了5000亿+的商业价格

1.4还要其他的小程序

  1. 支付宝小程序
  2. 百度小程序
  3. QQ小程序
  4. 今日头条 + 抖音小程序

2.环境准备

开发微信小程序之前,必须要准备好相应的环境
2.1注册账号
建议使用全新的邮箱,没有注册过其他小程序或者公众号
2.2获取APPID
用于后期调用微信小程序的接口等功能,需要索取开发者的小程序中的APPID,所以在注册成功后,可登录,然后获取APPID
2.3开发工具
这里我用的是微信开发者工具
如下图:在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.第一个微信小程序

3.1打开微信开发者工具
第一次打开需要扫码登录,登录之后是这样的
在这里插入图片描述

4.小程序配置文件

一个小程序应用程序会包括最基本的俩种配置文件。一种是全局的app.json和页面自己的page.json
4.1全局配置文件app.json
创建新页面,注意换个地方的话是不会新增页面的
在这里插入图片描述
在这里插入图片描述
字段的含义

  1. pages字段—用于描述当前小程序所以页面路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录
  2. window字段—定义小程序所以页面的顶部背景颜色,文字颜色定义等

4.2window演示
1.可以实现下拉刷新功能
在这里插入图片描述
2.修改导航栏颜色
在这里插入图片描述
3.修改标题名称
在这里插入图片描述
4.文字的颜色 注意:这里只能使用黑色和白色
在这里插入图片描述
5.下拉刷新所展现的小圆点的颜色
在这里插入图片描述
在这里插入图片描述
6.下拉刷新区域背景颜色
在这里插入图片描述
4.3tabBar
配置前需要先找图片素材,我是在阿里下载的
在这里插入图片描述

  • 配置代码及效果图
 "tabBar": {
    "list": [{
      "pagePath":"pages/index/index",
      "text": "首页",
      "iconPath": "icon/_home.png",
      "selectedIconPath": "icon/home.png"
    },
    {
      "pagePath":"pages/img/img",
      "text": "图片",
      "iconPath": "icon/_img.png",
      "selectedIconPath": "icon/img.png"
    },
    {
      "pagePath":"pages/mine/mine",
      "text": "我的",
      "iconPath": "icon/_my.png",
      "selectedIconPath": "icon/my.png"
    },
    {
      "pagePath":"pages/search/search",
      "text": "搜索",
      "iconPath": "icon/_search.png",
      "selectedIconPath": "icon/search.png"
    }

在这里插入图片描述
以及添加样式的代码
在这里插入图片描述
以上就是我今天所学的全局配置文件及页面配置

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值