【微信小程序】6天精准入门(第1天:小程序入门)

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

一、介绍

1、什么是小程序

        小程序是一种轻量级的应用程序,可以在移动设备上运行,不需要用户下载和安装。它们通常由企业或开发者开发,用于提供特定功能或服务。

        微信小程序(wei xin xiao cheng xu),简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用( 张小龙对其的定义是无需安装,用完即走,实际上是需要安装的,只不过小程序的体积特别小, 下载速度很快,用户感觉不到下载的过程 )

2、小程序的作用

        小程序的作用很多。首先,它们提供了一种方便的方式,让用户能够直接在手机上访问特定的功能或服务,而不需要下载一个完整的应用程序。小程序还可以帮助企业或开发者降低开发和维护应用程序的成本,因为它们只需要在一个平台上进行开发,就可以在多个平台上运行。

3、小程序可以干什么

        小程序可以实现各种功能。例如,你可以使用小程序进行在线购物、预订餐厅、查看新闻、打开电子书、使用在线工具,甚至是玩游戏。小程序通常提供简单、直观的用户界面,使用户能够快速完成他们想要的任务。通过小程序,用户可以节省时间和精力,同时提供更加个性化的使用体验。

  1. 同App进行互补,提供同app类似的功能,比app操作更加简洁的轻应用
  2. 通过扫一扫或者在微信搜索即可下载
  3. 用户使用频率不高,但又不得不用的功能软件,目前看来小程序是首选
  4. 连接线上线下
  5. 开发门槛低, 成本低 

二、小程序入门

1、注册

进入小程序官网公众号 (qq.com)

然后进入我们的注册界面按照提示步骤进行注册注册页面

【微信小程序】6天精准入门(第1天:小程序入门),# 微信小程序,小程序,微信小程序,javascript【微信小程序】6天精准入门(第1天:小程序入门),# 微信小程序,小程序,微信小程序,javascript

【微信小程序】6天精准入门(第1天:小程序入门),# 微信小程序,小程序,微信小程序,javascript

2、登录

进入我们的小程序后台,找到我们的小程序ID,后续开发需要

【微信小程序】6天精准入门(第1天:小程序入门),# 微信小程序,小程序,微信小程序,javascript

3、安装开发者工具

        进入官网的开发者下载页面微信开发者工具下载地址与更新日志 | 微信开放文档 (qq.com),选择需要的版本进行下载安装。

        进去后进行登录创建,选择需要的功能进行开发。

        后端服务选择的事微信云开发是已经写好的一部分代码,可以直接运行的;选择的是不使用云服务则是自己编写代码。

【微信小程序】6天精准入门(第1天:小程序入门),# 微信小程序,小程序,微信小程序,javascript

三、入门案例

1、创建

选择不使用云服务,选择JavaScript-基础版本,确定创建,等待创建(必须要联网),出现了你登陆的账号头像就说明创建成功了。

【微信小程序】6天精准入门(第1天:小程序入门),# 微信小程序,小程序,微信小程序,javascript

【微信小程序】6天精准入门(第1天:小程序入门),# 微信小程序,小程序,微信小程序,javascript

2、目录结构

文件 必需 作用
app.js 小程序逻辑
app.json 小程序公共配置
app.wxss 小程序公共样式表

【微信小程序】6天精准入门(第1天:小程序入门),# 微信小程序,小程序,微信小程序,javascript

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

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

这两个代码代表了谁在前面谁就是主页面

【微信小程序】6天精准入门(第1天:小程序入门),# 微信小程序,小程序,微信小程序,javascript

3、配置文件

app.json

设置全局顶部背景样式

【微信小程序】6天精准入门(第1天:小程序入门),# 微信小程序,小程序,微信小程序,javascript

如果我们想用不同的可以在对应的json文件里面进行配置

【微信小程序】6天精准入门(第1天:小程序入门),# 微信小程序,小程序,微信小程序,javascript

【微信小程序】6天精准入门(第1天:小程序入门),# 微信小程序,小程序,微信小程序,javascript

4、创建文件

添加你所需要的文件在在全局的app.json里面会自动生成

【微信小程序】6天精准入门(第1天:小程序入门),# 微信小程序,小程序,微信小程序,javascript

4.1、json配置

在生成的json文件里面进行页面的配置

{
  "usingComponents": {},
  "navigationBarTitleText": "学生页面"
}

【微信小程序】6天精准入门(第1天:小程序入门),# 微信小程序,小程序,微信小程序,javascript

4.2、数据的传递及页面的布置

如果页面不知道这么编写可以参考小程序的wxml文档小程序简介 | 微信开放文档 (qq.com),数据用{{}}来传递。

<view class="container">
  学生信息:{{stuName}}
</view>

js里面的data里面定义一个stuName

  data: {
    stuName:'我真的会谢'
  }

【微信小程序】6天精准入门(第1天:小程序入门),# 微信小程序,小程序,微信小程序,javascript

4.3、样式

wxss文件里面写好我们需要的样式

/* pages/stu/stu.wxss */
.stuinfo{
  font-size: 20px;
  color: blue;
}

在wxml里面用class属性调用

<view class="container"  class="stuinfo">
  学生信息:{{stuName}}
</view>

【微信小程序】6天精准入门(第1天:小程序入门),# 微信小程序,小程序,微信小程序,javascript

4.4、事件

wxml里面添加标签按钮

<!--pages/stu/stu.wxml-->
<view class="container" class="stuinfo">
  学生信息:{{stuName}}
  <button bindtap="ondian">点击</button>
</view>

js文件里面写一个方法

  // 点击
  ondian(){
      console.log('点到我了');
  }

【微信小程序】6天精准入门(第1天:小程序入门),# 微信小程序,小程序,微信小程序,javascript

【微信小程序】6天精准入门(第1天:小程序入门),# 微信小程序,小程序,微信小程序,javascript

分享就到这里感谢大家在评论区讨论!!!文章来源地址https://www.toymoban.com/news/detail-714363.html

到了这里,关于【微信小程序】6天精准入门(第1天:小程序入门)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 微信小程序精准扶贫数据收集小程序平台设计与实现

    摘 要 近些年以来,随着我国的互联网技术的不断进步,计算机科学技术的发展也在不断的快速发展。在当下“互联网+”的带动下,我国的各行各业,上到政府机关下到小微企业都通过互联网的发展带动取得了很好的发展势头。我国这两年来通过利用互联网技术与精准扶贫相

    2024年02月10日
    浏览(31)
  • 基于微信小程序的农产品电商平台精准营销模式创新研究

    目 前在农产品销售过程出现一个非常严重的问题─滞销, 我们时不时的能在新闻报道看到某地区农产品大量上市却少有客商前来收购, 甚至一度出现大量新鲜的农产品烂在地头无人问津, 被当作垃圾一样扔掉。 客商在收购农产品过程中, 将产品的收购价格压的极低, 随着

    2024年02月10日
    浏览(66)
  • 【抓包教程】微信小程序精准流量抓包教程(超详细 保姆级教程 BP安装证书手把手教)

    1.打开浏览器,右上角打开设置。搜索代理 我们点击最后一个,打开计算机的代理设置。自动跳转到设置界面。 按照如下图配置 这里的地址和端口要和我们BP中的一致,我们需要打开bp看看。 这里配置相同后,我们打开浏览器,输入以下内容,下载证书 点击右上角,会自动下

    2024年02月21日
    浏览(51)
  • 微信小程序实现拼团功能javascript + swiper

    实现以上的拼团功能,纯自己手写 1.js 部分自己封装的方法,需要后台返回拼团组,主要包括团长信息,团结束时间等,核心是要拼接上面的最后面的1秒只内从9减到0的倒计时,给用户一种紧迫感 startCountdown: function () { const that = this; const timer = setInterval(function () { const groups =

    2024年02月02日
    浏览(48)
  • JavaScript、微信小程序 根据汉字拼音首字母进行归类分组

    在微信小程序里面不支持这个localeCompare方法,所以有了下面的方法 我们需要一个 开源的汉字库 ,也就是码表。这个库就可以。git库 不想去git下载直接拉到最底下有js文件,直接复制就行。 然后页面引入 china.js代码

    2024年02月11日
    浏览(42)
  • 微信小程序(小程序入门)

         小程序是一种轻量级的应用程序,可以在移动设备上运行,不需要用户下载和安装。它们通常由企业或开发者开发,用于提供特定功能或服务。         微信小程序(wei xin xiao cheng xu),简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用( 张小龙对

    2024年02月07日
    浏览(43)
  • 【微信小程序入门到精通】— 微信小程序实现多页面切换(tabBar)

    对于目前形式,微信小程序是一个热门,那么我们该如何去学习并且掌握之后去做实际项目呢? 为此我特意开设此专栏,在我学习的同时也将其分享给大家! 本篇文章将给大家带来如何添加页面切换效果,我们前面所讲解的都是停留在某一页面上面进行预览,接下来我们将

    2024年02月03日
    浏览(114)
  • 【微信小程序开发零基础入门】——微信小程序入门

    学习小程序跟学习网页开发有什么不同 1.如何创建微信小程序项目 1.1 注册、登录、复制appId 注册:在 https://mp.weixin.qq.com/cgi-bin/wx 进行注册微信小程序开发账号 登录:在 https://mp.weixin.qq.com 登录小程序账号 复制appId: 在 \\\"开发\\\" 的 \\\"开发管理\\\" 的 \\\"开发设置\\\" 的 \\\"开发者ID\\\"中 1.2 下

    2024年02月03日
    浏览(62)
  • 微信小程序入门篇

    运行环境不同:网页在浏览器环境、小程序在微信支付宝等环境 API不同:不发使用DOM和BOM的API,可使用微信环境提供API如支付、扫码、定位 开发模式不同(主要区别) :网页开发是浏览器+代码编辑器;小程序是申请账号+安装小程序开发者工具+创建配置项目 使用最多的是组

    2024年02月15日
    浏览(36)
  • 微信小程序-入门

    微信小程序开发工具下载: 微信官方文档:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 微信开放平台:https://open.weixin.qq.com/home 微信公众平台:https://mp.weixin.qq.com/ 使用微信扫码 创建项目 工具支持5种文件的编辑:wxml,wxss,js,json,wxs以及图片文件的预览 1.1 小程

    2024年01月18日
    浏览(40)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包