微信小程序使用

news2024/11/24 16:04:50

微信开发介绍

微信公众号的二次开发,主要点后端配置交互,前端负责h5页面
微信小程序和微信小游戏的开发,必须要依托于微信,方便宣传
开放平台,公众平台

小程序介绍

2016年出来的,取缔app应用。
传统的App应用开发成本,时间周期是比较长的。
小程序开发周期更短,无需下载,依托于微信,安全性更好。
开发成本更低,小程序审核即可。小程序也可以做App应用开发了。
小程序开发工程师。

小程序的优点

快速的加载
更强大的能力
原生的体验
易用且安全的微信数据开放
高效和简单的开发

小程序的使用

首先我们需要注册小程序,并且下载微信开发者工具

申请账号

进入小程序注册页 根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号

下载微信开发者工具

开发者工具的下载地址: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

下载完成之后进行安装,安装成功打开之后,我们就可以看到微信开发者工具的基本页面了

创建第一个程序

新建一个文件夹,必须是空的文件夹,然后在目录中选择文件夹

选择模板,一般我们选择基本模板

然后我们的一个微信小程序就创建完成了

小程序的目录结构

app.js 小程序逻辑层的入口文件,必须要求
app.json 小程序的全局配置项
app.wxss 小程序全局css样式文件
pages目录 小程序中所有页面的目录
js文件 负责逻辑
wxml文件 负责页面结构
json文件 负责页面配置项
wxss文件 负责页面的css样式的

小程序的配置

小程序的配置分为全局配置app.json 和页面配置 pagexxx.json

页面配置的优先级高于全局配置,页面配置是全局配置的一部分,window窗口部分

tabbar的使用

我们在app.json中配置

{
  "entryPagePath": "pages/home/index",
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/home/index",
    "pages/cate/index",
    "pages/cart/index"
  ],
  "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#F00",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "white",
    "enablePullDownRefresh": true,
    "backgroundColor": "#F0F0F0"
  },
  "tabBar": {
    "color": "#333",
    "selectedColor": "#C00",
    "list": [{
      "pagePath": "pages/home/index",
      "text": "首页",
      "iconPath": "/static/tab_icons/home.png",
      "selectedIconPath": "/static/tab_icons/home-active.png"
    },{
      "pagePath": "pages/cate/index",
      "text": "分类",
      "iconPath": "/static/tab_icons/cate.png",
      "selectedIconPath": "/static/tab_icons/cate-active.png"
    },{
      "pagePath": "pages/cart/index",
      "text": "购物车",
      "iconPath": "/static/tab_icons/cart.png",
      "selectedIconPath": "/static/tab_icons/cart-active.png"
    },{
      "pagePath": "pages/index/index",
      "text": "个人",
      "iconPath": "/static/tab_icons/my.png",
      "selectedIconPath": "/static/tab_icons/my-active.png"
    }]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}
}

需要注意的是,iconPath和selectedIconPath是图片,在本地下载,使用本地的路径才可以使用,否则会报错

这样,一个基本的项目我们就搭建成功了

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

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

相关文章

Vue中动态展示数据的字典项

问题描述 今天在写自己网站的时候,遇到一个问题,不知道各位前端初学者有没有遇到过这个问题 如图所示:我通过接口查询到一些信息,有两个属性是枚举数据(魔法值) 我们称这种数据为字典项,因为开发中一般称0&#xff…

AWS Markeplace 上的 DolphinDB MGR 快速上手

1. AWS 上的 DolphinDB MGR 简介 DolphinDB MGR 是部署于 Kubernetes 上的 DolphinDB 集群自动运维系统,提供包括部署、升级、扩缩容、配置变更的 DolphinDB 全生命周期管理。通过 DolphinDB MGR,DolphinDB 可以无缝运行在公有云或私有部署的 Kubernete…

openEuler RISC-V 的 Firefox 性能大升级,最高 40 倍性能提升

RISC-V SIG 择日即将发布 openEuler RISC-V 22.03 V2 版本镜像。本次发版会提供带有 SpiderMonkey JIT 编译支持的 Firefox 最新版本和带有 LLVMpipe 优化的 Mesa 最新版本安装源供使用者选装测试,预期图形界面使用性能会获得可观优化。 新版本的 Firefox 开启 JIT…

5.3、UDP 和 TCP 的对比

在使用 TCP/IP 体系结构的网络通信中,这两个协议的使用频率仅次于网际层的 IP 协议 TCP/IP 体系结构应用层中的某些协议需要使用运输层的 TCP 提供的服务 而另一些协议需要使用运输层的 UDP 提供的服务 1、UCP(无连接) & TCP(面向连接) 1.1、UDP 如下所示&am…

小程序:会议OA项目-其它页面

目录 一、tabs组件及会议管理布局 自定义tabs组件 跟着官网来感受一下 会议管理的布局 二、个人中心布局 一、tabs组件及会议管理布局 自定义tabs组件 文档参考:自定义组件 | 微信开放文档 跟着官网来感受一下 先建一个文件夹名为components,里面再建一个tabs的…

【C语言进阶(NEW)】六、文件操作(一)|文件|文件的打开和关闭|文件的顺序读写|文件读取结束的判定

目录 一、文件 1.1 什么是文件 1.1.1 程序文件 1.1.2 数据文件 1.2 为什么使用文件 1.3 文件名 二、文件的打开和关闭 2.1 文件指针 2.2 文件的打开和关闭 三、文件的顺序读写 3.1 fgetc 和 fputc(字符输入输出函数) 3.2 fgets 和 fputs&am…

20行原生JS代码手写ElementUI表格组件

又是许久没有写博客了,这几年的疫情,总是居家,时间久了,慢慢的总会想很多。现在越发觉得想做的事情一定要尽早去做,不然总说等下一次,很多时候,就没有下一次了。 今天给大家分享一下如何用原生…

从0到1完成一个Vue后台管理项目(十七、使用Echarts:柱状图、折线图)

往期 从0到1完成一个Vue后台管理项目(一、创建项目) 从0到1完成一个Vue后台管理项目(二、使用element-ui) 从0到1完成一个Vue后台管理项目(三、使用SCSS/LESS,安装图标库) 从0到1完成一个Vu…

DB性能跟不上,加缓存就够了?

服务端软件开发时,通常会把数据存储在DB。而服务端系统遇到的第一个性能瓶颈,往往发生在访问DB时。 这时大部分开发会拿出“缓存”,通过使用Redis在DB前提供一层缓存数据,缓解DB压力,提升服务端性能。 在数据库前添加…

nohup后台运行,进程查看与终止(ubuntu)

1.nohup用途:不挂断地运行命令。语法:nohup Command [ Arg … ] [ & ]无论是否将 nohup 命令的输出重定向到终端,输出都将附加到当前目录的 nohup.out 文件中。如果当前目录的 nohup.out 文件不可写,输出重定向到 $HOME/nohu…

threejs 学习一

前提 threejs官网:https://threejs.org/ 由于官网访问慢,可以github下载压缩包解压后本地启动 github地址:https://github.com/mrdoob/three.js/ 下载好后解压 安装依赖 npm install 启动:npm start 目录介绍: …

语音识别技术简叙述

语音识别技术简述 语音识别的概念 语音识别技术都是让智能设备能够听懂人类语言,其实一门涉及数学信号处理、人工智能、语言学、数理统计学、声学、情感学及心理学等多学科交叉的学科。这项技术可以提供比如自动客服、自动语音翻译、命令控制,语音验证…

【vue】关于vue2和vue3响应式原理的区别

我们都知道,在Vue2中的数据响应式原理存在许多缺陷。 例如无法对新增和直接删除的数据做到响应式,无法直接操作数组进行响应式处理等等。 而在Vue3中,作者很好的解决了这些缺陷,让我们来对比一下Vue2与Vue3对数据响应式处理的具体…

前端如何保证设置的font-family成功生效?

背景 最近开发的一个新页面,在产品验收的时候跟我反馈说页面里的字体跟设计稿中的字体不一样; 问题的关键是我明明记得我有单独设置过 font-family属性,于是我通过Chorme浏览器的调试工具查看了一下DOM的生效样式; 明明是已经设…

IDEA、TortoiseSVN,TortoiseGit提交忽略文件或文件夹

使用IDEA 的SVN插件提交文件是总是会提交一些不需要提交的文件; 我们可以通过一些简单设置忽略这些文件&#xff1a; 1、IDEA 1、idea设置<<--File Types<<--ignore files and folders 原有的过滤条件&#xff1a;*.hprof;*.pyc;*.pyo;*.rbc;*.yarb;*~;.DS_Store…

yolov3-tiny的darknet权重转onnx

前言 之前一直鸽了yolov3-tiny的onnx模型修复&#xff0c;今天终于把最后一个bug解决了&#xff0c;如果想直接享受成果的&#xff0c;直接点我的github仓库下载&#xff0c;使用说明都写了&#xff0c;这篇文章呢主要是给大家分享一下思路和过程&#xff0c;希望能够启发更多…

初识Linux

文章目录初识Linux操作系统概述硬件和软件操作系统常见操作系统总结初识LinuxLinux的诞生Linux内核Linux发行版总结虚拟机介绍虚拟机总结远程连接Linux系统图形化、命令行使用命令行学习Linux系统远程连接工具总结初识Linux 操作系统概述 硬件和软件 我们所熟知的计算机是由…

领域驱动设计:微服务设计为什么要选择DDD?

我们知道&#xff0c;微服务设计过程中往往会面临边界如何划定的问题&#xff0c;我经常看到项目团队为微服务到底应该拆多小而争得面红耳赤。不同的人会根据自己对微服务的理解而拆分出不同的微服务&#xff0c;于是大家各执一词&#xff0c;谁也说服不了谁&#xff0c;都觉得…

Day855.生产者-消费者模式 -Java 并发编程实战

生产者-消费者模式 Hi&#xff0c;我是阿昌&#xff0c;今天学习记录的是关于生产者-消费者模式的内容。 Worker Thread 模式类比的是工厂里车间工人的工作模式。 但其实在现实世界&#xff0c;工厂里还有一种流水线的工作模式&#xff0c;类比到编程领域&#xff0c;就是生…

RoboMaster EP 实用功能开发(三): 基于树莓派的ROS2机器人系统搭建

功能&#xff1a;在树莓派4b上安装ros2系统&#xff0c;引入robomaster sdk&#xff0c;搭建一个基于ROS2的机器人系统&#xff0c;用于ROS系统的学习、开发和实践。 硬件&#xff1a;RobotMaster EP、树莓派4b 系统平台&#xff1a;Ubuntu 20.04、ROS2&#xff08;Foxy&…