Uniapp笔记(八)初识微信小程序

一、微信小程序基本介绍

1、什么是微信小程序

微信小程序简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用 小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验

2、发展历程

2016年1月11日,微信之父张小龙解读了微信的四大价值观,指出拆分出来的服务号并没有提供更好的服务,所以微信内部正在研究新的形态,叫「微信小程序」 2016年9月21日,微信小程序正式开启内测 2017年1月9日0点,微信第一批小程序正式上线

二.第一个小程序

1、注册小程序

  • 注册微信小程序账号:小程序

2、获取小程序的AppID

扫码登录后进入小程序管理后台,左侧栏中选择开发>开发管理>开发设置,就能看到AppID(小程序ID)

3、微信开发者工具

下载地址:微信开发者工具下载地址与更新日志 | 微信开放文档

4、创建小程序项目

5、 查看运行效果

  • 在模拟器上查看项目效果:单击编译按钮即可

  • 在真机上预览项目效果:单击的预览按钮,然后生成二维码后,使用手机扫描,就可以看到真机的效果了。

6、目录结构解析

  • app.json 是对当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等

  • project.config.json 工具配置,例如界面颜色、编译配置等等

  • app.js小程序的初始化脚本,监听小程序生命周期,全局变量,定义API全剧调用

  • app.wxss小程序的全局配置公共样式表

一个小程序页面由四个文件组成,分别是

文件类型必需作用
js页面逻辑
wxml页面结构
json页面配置
wxss页面样式

注意:为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径与文件名

三、配置文件

1、配置文件概述

JSON是一种数据格式,在实际开发过程中,JSON总是以配置文件的形式出现,小程序项目中也不例外;通过不同的.json配置文件,可以对小程序项目进行不同级别的配置。

小程序项目中的4种JSON配置文件,分别是

  • 项目根目录中的app.json配置文件

  • 每个页面文件夹中的.json配置文件

  • 项目根目录中的project.config.json配置文件

  • 项目根目录中的sitemap.json配置文件

2、project.config.json

project.config.json是项目配置文件,用来记录我们对小程序开发工具所做的个性化配置

  • settings中保存了编译相关的配置

  • projectname中保存的是项目名称

  • appid中保存的是小程序的账号ID

3、sitemap配置

微信现已开放小程序内搜索,开发者可以通过 sitemap.json 配置,或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引。当用户的搜索词条触发该索引时,小程序的页面将可能展示在搜索结果中。 爬虫访问小程序内页面时,会携带特定的 user-agent:mpcrawler 及场景值:1129。需要注意的是,若小程序爬虫发现的页面数据和真实用户的呈现不一致,那么该页面将不会进入索引中。

4、页面配置page.json

页面配置page.json

这里的page.json其实用来表示页面下的page.json,这类和小程序页面的相关的配置

开发者可以独立定义每个页面的一些属性,如顶部颜色、是否允许下拉刷新等等

页面的配置只能设置app.json中部分window配置项的内容,页面中配置项会覆盖app.json额window中相同的配置项

{"usingComponents": {},"navigationBarBackgroundColor": "#f094ff"
}

这里修改的是mime.json中导航栏背景色为#f094ff

5、全局配置文件

app.json是当前小程序的全局配置,包括了小程序的所有页面路径,界面表现,网络超时时间,底部tab等。

{"pages":["pages/index/index","pages/logs/logs"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "Weixin","navigationBarTextStyle":"black"},"style": "v2","sitemapLocation": "sitemap.json"
}

字段含义

  • pages字段: 用来记录当前小程序所有页面的路径。

  • windows字段:全局定义小程序所有页面的顶部背景颜色,文字颜色定义等。

  • style:全局定义小程序组件所使用的样式版本。

  • sitemapLocation:用来指明sitemap.json的位置。

window字段常用的配置项

属性名类型默认值说明
navigationBarTitleTextString字符串导航栏标题文字内容
navigationBarBackgroundColorHexColor#000000导航栏背景颜色,如#000000
navigationBarTextStyleStringwhite导航栏标题颜色,仅支持black/white
backgroundColorHexColor#ffffff窗口背景色
backgroundTextStyleStringdark下拉loading的样式,仅支持dark/light
enablePullDownRefereshBooleanfalse是否全局开启下拉刷新
enReachBottomDistanceNumber50页面上拉触底时间触发时距页面底部距离,单位为px

6、tabBar配置

1)什么是tabBar

tabBar是移动端常见的效果,用于实现多页面的快速切换。小程序中通常将其分为

  • 底部tabBar

  • 顶部tabBar

注意:

  • tabBar中只能配置最少2个,最多5个tab页签

  • 当渲染顶部tabBar时候,不显示icon,只显示文本

2)tabBar节点的配置项

属性类型必填说明
positionStringtabBar的位置,仅支持bottom/top
borderStyleStringtabBar上边框的颜色,仅支持black/white
colorHexColortab上文字的默认(未选中)颜色
selectedColorHexColortab上的文字选中时的颜色
backgroundColorHexColortabBar的背景色
listArraytab页签的列表,最少2个、最多5个
  • selectedIconPath:选中时的图片路径

  • iconPath:未选中时的图片路径

在app.json中添加tabBar节点,具体内容如下代码

"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "./assets/icons/home.png","selectedIconPath": "./assets/icons/home_selected.png"},{"pagePath": "pages/category/category","text": "分类","iconPath": "./assets/icons/category.png","selectedIconPath": "./assets/icons/category_selected.png" },{"pagePath": "pages/mine/mine","text": "我的","iconPath": "./assets/icons/mine.png","selectedIconPath": "./assets/icons/mine_selected.png" }]

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/55874.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

04_21 slab分配器 分配对象实战

目的 ( slab块分配器分配内存)&#xff0c;编写个内核模块&#xff0c;创建名称为 “mycaches"的slab描述符&#xff0c;小为40字节, align为8字节&#xff0c; flags为0。 从这个slab描述符中分配个空闲对象。 代码大概 内核模块中 #include <linux/version.h>…

深度学习模型数值稳定性——梯度衰减和梯度爆炸的说明

文章目录 0. 前言1. 为什么会出现梯度衰减和梯度爆炸&#xff1f;2. 如何提高数值稳定性&#xff1f;2.1 随机初始化模型参数2.2 梯度裁剪&#xff08;Gradient Clipping&#xff09;2.3 正则化2.4 Batch Normalization2.5 LSTM&#xff1f;Short Cut&#xff01; 0. 前言 按照…

【LeetCode-中等题】2. 两数相加

文章目录 题目方法一&#xff1a;借助一个进制位&#xff0c;以及更新尾结点方法一改进&#xff1a;相比较第一种&#xff0c;给head一个临时头节点&#xff08;开始节点&#xff09;&#xff0c;最后返回的时候返回head.next&#xff0c;这样可以省去第一次的判断 题目 方法一…

JVM——类加载与字节码技术—类文件结构

由源文件被编译成字节码文件&#xff0c;然后经过类加载器进行类加载&#xff0c;了解类加载的各个阶段&#xff0c;了解有哪些类加载器&#xff0c;加载到虚拟机中执行字节码指令&#xff0c;执行时使用解释器进行解释执行&#xff0c;解释时对热点代码进行运行期的编译处理。…

idea的debug断点的使用

添加断点&#xff08;目前不知道如何添加断点&#xff0c;就给AutoConfigurationImportSelector的每个方法都加上断点&#xff09;&#xff1a; 然后将StockApplication启动类以debug方式运行&#xff0c;然后程序就会停在119行 点击上边的step over让程序往下运行一行&#x…

《入门级-Cocos2dx4.0 塔防游戏开发》---第七课:游戏界面开发(自定义Layer)

目录 一、开发环境 二、开发内容 2.1 添加资源文件 2.2 游戏MenuLayer开发 2.3 GameLayer开发 三、演示效果 四、知识点 4.1 sprite、layer、scene区别 4.2 setAnchorPoint 一、开发环境 操作系统&#xff1a;UOS1060专业版本。 cocos2dx:版本4.0 环境搭建教程&…

2.3.Dubbo的基本应用- 异步调用 、泛化调用 、动态配置

异步调用 官网地址&#xff1a; http://dubbo.apache.org/zh/docs/v2.7/user/examples/async-call/ 理解起来比较容易&#xff0c; 主要要理解CompletableFuture&#xff0c; 如果不理解&#xff0c; 就直接把它理解为Future 其他异步调用方式&#xff1a;Dubbo 同步调用太慢&a…

web、HTTP协议

目录 一、Web基础 1.1 HTML概述 1.1.1 HTML的文件结构 1.2 HTML中的部分基本标签 二.HTTP协议 2.1.http概念 2.2.HTTP协议版本 2.3.http请求方法 2.4.HTTP请求访问的完整过程 2.5.http状态码 2.6.http请求报文和响应报文 2.7.HTTP连接优化 三.httpd介绍 3.1.http…

RK3399平台开发系列讲解(存储篇)Linux 存储系统的 I/O 栈

平台内核版本安卓版本RK3399Linux4.4Android7.1🚀返回专栏总目录 文章目录 一、Linux 存储系统全景二、Linux 存储系统的缓存沉淀、分享、成长,让自己和他人都能有所收获!😄 📢本篇将介绍 Linux 存储系统的 I/O 原理。 一、Linux 存储系统全景 我们可以把 Linux 存储系…

JUC并发编程(一)

JUC并发编程 1. 查看进程和线程的方法1.1 Windows1.2 Linux 1. 查看进程和线程的方法 1.1 Windows 任务管理器可以查看进程和线程数&#xff0c;也可以用来杀死进程tasklist 查看进程taskkill 杀死进程 1.2 Linux ps -fe 查看所有进程ps -fT -p <PID> 查看某个进程&a…

10*1000【2】

知识: -----------金融科技背后的技术---------------- -------------三个数字化趋势 1.数据爆炸&#xff1a;internet of everything&#xff08;iot&#xff09;&#xff1b;实时贡献数据&#xff1b;公有云服务->提供了灵活的计算和存储。 2.由计算能力驱动的&#x…

【跟小嘉学 Rust 编程】十三、函数式语言特性:迭代器和闭包

系列文章目录 【跟小嘉学 Rust 编程】一、Rust 编程基础 【跟小嘉学 Rust 编程】二、Rust 包管理工具使用 【跟小嘉学 Rust 编程】三、Rust 的基本程序概念 【跟小嘉学 Rust 编程】四、理解 Rust 的所有权概念 【跟小嘉学 Rust 编程】五、使用结构体关联结构化数据 【跟小嘉学…

Leetcode 191.位1的个数

编写一个函数&#xff0c;输入是一个无符号整数&#xff08;以二进制串的形式&#xff09;&#xff0c;返回其二进制表达式中数字位数为 1 的个数&#xff08;也被称为汉明重量&#xff09;。 提示&#xff1a; 请注意&#xff0c;在某些语言&#xff08;如 Java&#xff09;中…

2023/08/27

一、图片引入 项目中往往不使用相对路径引入文件&#xff0c;一般都使用实现绝对路径引入文件。 方式一&#xff1a;【适用vue2&#xff0c;不适用vue3】 <img :src"require(/assets/images/home/bottom_can.png)" alt"">方式二&#xff1a;【适用…

mac m1 docker 安装kafka和zookeeper

获取本地ip地址 ifconfig en0 192.168.0.105. 下面的ip都会使用到 1、拉取镜像 docker pull wurstmeister/zookeeper docker pull wurstmeister/kafka 2、启动容器 启动 zookeeper docker run -d --name zookeeper -p 2181:2181 映射 3、 启动 kafka 注意&#xff…

计网-All

路由器的功能与路由表的查看_路由器路由表_傻傻小猪哈哈的博客-CSDN博客路由基础-直连路由、静态路由与动态路由的概念_MikeVane-bb的博客-CSDN博客路由器的功能与路由表的查看_路由器路由表_傻傻小猪哈哈的博客-CSDN博客 直连路由就是路由器直接连了一个网段&#xff0c;他就…

一个短视频去水印小程序,附源码

闲来无事&#xff0c;开发了一个短视频去水印小程序&#xff0c;目前支持抖音、快手&#xff0c;后续再加上别的平台。 因为平台原因&#xff0c;就不放二维码了&#xff0c;你可以直接微信搜索【万能老助手】这里贴一张效果图。 页面非常简单&#xff0c;这里就不过多介绍了&…

Git企业开发控制理论和实操-从入门到深入(五)|标签管理

前言 那么这里博主先安利一些干货满满的专栏了&#xff01; 首先是博主的高质量博客的汇总&#xff0c;这个专栏里面的博客&#xff0c;都是博主最最用心写的一部分&#xff0c;干货满满&#xff0c;希望对大家有帮助。 高质量博客汇总 然后就是博主最近最花时间的一个专栏…

正则表达式总结

作为软件工程师&#xff0c;工作中经常都需要使用正则表达式进行搜索&#xff0c;替换&#xff0c;验证数据&#xff08;手机号、邮箱、账号&#xff09;等。 但没有系统的学习总结过。现在就来学习总结一下。 认识元字符 元字符就是一些特殊符号&#xff0c;代表一些特殊意思…

初始Netty

文章目录 目录 文章目录 前言 一、netty 总结 前言 认识netty 一、netty Netty是一个基于Java的高性能网络应用框架&#xff0c;用于快速开发可扩展的网络服务器和客户端。它提供了易于使用的抽象API&#xff0c;使开发人员能够轻松地构建各种网络应用程序&#xff0c;包括…