微信小程序详细介绍

这篇具有很好参考价值的文章主要介绍了微信小程序详细介绍。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言:

  • 微信小程序自发布以来,逐渐进入到我们的生活中,成为我们生活中不可或缺的一部分,但你真的了解微信小程序的由来吗?本篇文档为大家一 一讲解

一,什么是微信小程序

  • 微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。

二,微信小程序发展史

  • 微信小程序的发展史可以追溯到2016年1月9日,当时腾讯公司在深圳发布了微信7.0版本,其中包含了小程序的概念和演示。小程序可以在微信内嵌入的子应用程序,占用很少的存储空间,需要时可以快速下载安装,用户可以随时随地打开使用。

  • 随后,微信小程序在2017年1月正式上线,起初只能够在iOS端使用,后来在2017年9月才推出了Android端的版本。小程序的推出打破了传统应用的下载安装模式,用户可以在不离开微信的情况下使用各种功能和服务。

  • 微信小程序的发展历程中,经历了大量的更新和改进,包括增加了更多的功能和服务、提升了用户的体验和安全性、优化了开发者的开发环境和支持等。到2021年,微信小程序已经成为了一个庞大的生态系统,包括了各种类型的应用,如电商、社交、游戏、出行、金融等。

  • 未来,微信小程序还将继续扩大生态范围,为用户带来更多的便利和服务,同时继续完善开发者支持和生态合作机制,推动小程序产业的进一步发展。

三,微信小程序优缺点

  • 优点
    • 体积小:微信小程序体积只有不到10MB,相对于传统的APP来说体积非常小,用户下载、安装和启用小程序速度快。

    • 无需安装:微信小程序不需要用户通过应用市场或其他途径安装,只需要在微信中搜索即可,省去了用户安装APP的麻烦。

    • 快速启动:微信小程序不会占用手机存储空间,启动速度很快,能够满足用户快捷高效的需求。

    • 线下推广:微信小程序可以通过线下二维码等多种方式推广,吸引更多用户。

    • 交互体验好:微信小程序允许开发者定制化用户界面,优化交互体验。

  • 缺点
    • 功能受限:微信小程序的功能相对传统的APP受到一定的限制,导致有些复杂的应用无法实现。
    • 不支持第三方登录:微信小程序只支持微信登录,不能使用其他第三方登录,限制了用户的多元化选择。
    • 生成流量定位难:由于微信小程序没有像普通APP那样的搜索引擎优化方式,因此生成流量定位比较困难。
    • 无法在后台运行:微信小程序在用户离开小程序后即被关闭,不能在后台运行,导致一些需要常驻后台的应用无法满足需求。
    • 需要微信环境支持:微信小程序需要用户在微信环境下使用,不能在其他平台使用,使用限制比较大

四,微信小程序与其他相关概念的区别

移动应用程序和Web应用程序的区别

微信小程序属于移动应用程序的范畴,可以在微信平台上直接使用,而Web应用程序则需要在浏览器中打开。微信小程序具有更快的启动速度、更高的流畅度和更好的用户体验

APP和H5的区别

微信小程序与APP(原生移动应用程序)的区别在于,微信小程序不需要下载安装,可以直接使用。而H5则需要在浏览器中使用,受限于网络环境和设备性能,体验相对较差。

普通网页和微信公众号的区别

微信公众号是一个具有定制化和交互性的微信账号,可以为用户提供丰富的服务和内容。而普通网页则只是一种静态的网页形式,缺乏个性化和互动性

小程序和小游戏的区别

虽然微信小程序和小游戏都是在微信平台上使用的,但小程序更多的是提供基于实用性和服务性的应用,如在线购物、生活服务等;而小游戏则更多的是以娱乐为主,如休闲游戏、体育竞技等。

小程序和小程序框架的区别

小程序是一种具体的产品形态,而小程序框架则是微信官方提供的工具,可以让开发者更容易地创建小程序。小程序框架是一种开发框架,而小程序则是通过这种开发框架而产生的具体产品。


五,小程序环境

注册小程序
登录小程序
微信小程序详细介绍小程序开发者工具
小程序文档


六,初始化项目

  • 新建项目
    • 扫码登录
  • 开发工具
    • 切后台
    • sensor 用来调试地理位置调式重力感应的api
  • 目录结构
    • app.json
      • 全局的公共配置:是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等
    • app.wxss
      • 小程序公共样式表
    • app.js
      • 小程序逻辑
    • project.config.json
      • 记录开发者工具配置信息例如界面颜色、编译配置等等
    • sitemap.json
      • 配置小程序页面是否被微信索引;

小程序页面配置

  • js :页面逻辑
  • wxml:页面结构
  • json:页面配置
  • wxss: 页面样式

小程序单位

  • 相关单位
    • pt逻辑分辨率(视觉单位,和屏幕尺寸有关系);
    • px物理分辨率(像素点)
    • ppi:每英寸包含的像素点
  • 小程序单位换算关系
    • iphone6下1px=1rpx=0.5pt(rpx会在不同设备下转换、而px不会)

七,导航栏配置

  • app.json
    • pages:配置小程序页面路径
    • window 配置顶部导航栏 文档地址
 {
    "window": {
      "navigationBarBackgroundColor": "#ffffff",
      "navigationBarTextStyle": "black",
      "navigationBarTitleText": "微信接口功能演示",
      "backgroundColor": "#eeeeee",
      "backgroundTextStyle": "light"
    }
  }
  • tabbar配置底部导航栏
 "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  },

微信小程序详细介绍

  • 路由跳转

    • wx.switchTap:跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
    • wx.navigateTo:保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
    • wx.redirectTo:关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
    • wx.reLaunch:关闭所有页面,打开到应用内的某个页面
  • 事件绑定

    • bindtap 和 catchtap:catch 会阻止冒泡
      • dataset 带参数
      • 事件中布尔值

八,模板引用

  • 定义模板

    <template name="A">
      <text> A template </text>
    </template>
    
  • 引入模板

    • Import 可以在该文件中使用目标文件定义的template
    <import src="/pages/templates/a.wxml" />
     <template is="a"></template>
    
    • include 可以将目标文件除了 template 外的整个代码引入,相当于是拷贝到 include 位置
<include src="/pages/templates/b.wxml" />

九,网络请求

wx.request({
  url: 'test.php', //仅为示例,并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})

总结

以上就是微信小程序的基础介绍和基础使用。希望本篇文章能够帮助到你,不懂得可以评论区或者私信问我,我也会一 一解答。谢谢观看!
我的其他文章:https://blog.csdn.net/m0_60970928?type=blog文章来源地址https://www.toymoban.com/news/detail-491282.html

到了这里,关于微信小程序详细介绍的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序发布上线流程

    微信小程序从零到上线,要经历小程序账号注册开通、完善小程序信息、开发小程序、提交小程序审核及发布四个过程: 一:微信小程序账号注册开通 注册开通小程序账号很简单,在微信公众平台即可开通 微信公众平台小程序 小程序账号注册很简单,填写邮箱、密码,然后

    2024年02月09日
    浏览(52)
  • 微信小程序发布图文代码

    这是第三个版本了。 通过promise异步实现发布多个图片,具体要发布图片,前端和js都需要改数量限制,最大值为9。 发现之前的方法已经过时,能用就行我也懒得换了,关于图片上传过大,影响上传速度以及主页展示渲染速度,影响体验,所以我加了一个压缩的方法。 小程序

    2024年02月16日
    浏览(35)
  • 微信小程序 -订阅发布模式

    图形展示: 代码展示: 1. 安装模块 pubsub-js 2. 导入模块(在需要订阅发布的 js 页面内进行导入) 注:在微信小程序中无法直接npm 下载 导入 的(安装一个就需要构建一次) 解决: 菜单栏 -- 工具 --  构建 npm   点击即可(会出现新的目录) 详情页: 1. 绑定两个事件,用于

    2024年02月04日
    浏览(36)
  • 微信小程序的发布及上线

    写在前面:博主是一只经过实战开发历练后投身培训事业的“小山猪”,昵称取自动画片《狮子王》中的“彭彭”,总是以乐观、积极的心态对待周边的事物。本人的技术路线从Java全栈工程师一路奔向大数据开发、数据挖掘领域,如今终有小成,愿将昔日所获与大家交流一二

    2024年02月12日
    浏览(55)
  • 微信小程序自动化发布

    文章描述不清 有疑问可以私信 Alison-Bird 参考:https://developers.weixin.qq.com/miniprogram/dev/devtools/ci.html 参考:https://www.npmjs.com/package/miniprogram-ci 上传文件 xx.js

    2024年02月07日
    浏览(41)
  • 微信小程序备案、配置、发布要点

    目录 小程序备案要求 小程序开发配置要点 微信小程序开发工具  发布小程序 小结 最近收到微信通知,对于存量小程序要履行备案手续,其依据《中华人民共和国反电信网络诈骗法》 、《互联网信息服务管理办法》 、《非经营性互联网信息服务备案管理办法》 等,设立移

    2024年04月12日
    浏览(45)
  • 使用 HBuilderX 发布微信小程序

    HBuilderX 是一款强大的前端开发工具,特别适用于微信小程序的开发和发布。本文将介绍如何使用 HBuilderX 来发布微信小程序。 首先,下载并安装 HBuilderX。安装完成后,打开 HBuilderX。 在 HBuilderX 中选择“新建项目”,选择“小程序”模板。 填写小程序基本信息,包括小程序名

    2024年02月02日
    浏览(42)
  • 微信小程序发布审核基本步骤(带图)

    本文作为烂笔头记录或小白感性认识或为客户做基础说明(复杂性时间等)大佬请勿费神。 微信开发者工具下载地址与更新日志 | 微信开放文档 1、登录微信公众平台(扫码或邮箱账号登录均可):微信公众平台 2、管理=》成员管理=》编辑(下箭头)=》添加成员=》搜索微信

    2024年02月16日
    浏览(37)
  • 微信小程序测试版发布流程

    1.注册好自己的微信开发者账号  2.在微信开发者工具,填写自己的appid,编写好了代码后,点击右上角的《上传》 3.接着在微信公众平台-小程序的后台,版本管理中,就能看到新提交的开发版本,点击 下拉 发布测试版即可  

    2024年02月12日
    浏览(48)
  • 微信小程序教学系列(5)- 小程序发布与推广

    第一节:小程序发布流程介绍 小伙伴们,欢迎来到第五章的教学啦!在这一章中,我们将一起来探索小程序的发布与推广流程。你准备好了吗?让我们开始吧! 1. 小程序发布流程概述 首先,我们需要了解小程序的发布流程。发布小程序之前,你需要提前准备好如下材料:

    2024年02月09日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包