微信小程序 ——入门介绍及简单的小程序编写

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

14天阅读挑战赛
自己决定的事情,就要不动声色的一往直前!

目录

一、小程序入门

1.1 什么是小程序

1.2 小程序的优点

1.3 小程序注册

1.4 安装开发工具

1.5 创建第一个小程序

二、小程序目录结构及入门案例

2.1 目录结构

2.2 入门案例

2.2.1 创建界面

2.2.2 设置标题

2.2.3 编写WXML文件

​编辑  

2.2.4 编写JS文件

​编辑

2.2.5  编写WXSS演样式文件

2.3 案例效果演示


一、小程序入门

1.1 什么是小程序

        小程序是一种轻量级的应用程序,通常用于在移动设备上提供特定功能或服务。它们类似于手机应用程序,但不需要用户下载和安装,可以直接在支持的平台上运行。小程序通常由HTML、CSS和JavaScript等前端技术开发,可以在微信、支付宝、百度等平台上运行。

1.2 小程序的优点

  • 无需从商店下载和更新
  • 不占内存,加载速度快
  • 开发成本低、门槛低
  • 连接线上线下

它还可以与手机的硬件功能(如相机、位置信息)进行交互,并提供与用户进行实时互动的能力。

1.3 小程序注册

开发小程序的第一步,你需要拥有一个小程序帐号,通过这个帐号你就可以管理你的小程序。 

进入官方文档申请账号👉 小程序注册

1、小程序注册

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

微信小程序 ——入门介绍及简单的小程序编写,微信小程序,java,微信小程序,小程序

2、激活邮箱

微信小程序 ——入门介绍及简单的小程序编写,微信小程序,java,微信小程序,小程序

3、用户登记注册

微信小程序 ——入门介绍及简单的小程序编写,微信小程序,java,微信小程序,小程序

  • 如果只是学习的话,注册个人小程序即可
  • 如果想商用,想使用微信支付,取用户手机号等复杂功能,可以注册企业小程序,不过企业小程序必须有营业执照才可以注册
  • 一个邮箱只能注册一个小程序
  • 一个身份证可以注册5个,个人小程序
  • 一个企业的营业执照可以注册50个企业小程序

4、登录 小程序后台 ,在这个小程序管理平台,你可以管理你的小程序的权限,查看数据报表,发布小程序等操作。

我们可以在菜单 “开发”-“开发设置” 看到小程序的 AppID 了 。

微信小程序 ——入门介绍及简单的小程序编写,微信小程序,java,微信小程序,小程序

1.4 安装开发工具

        前往 开发者工具下载页面 ,根据自己的操作系统下载对应的安装包进行安装,有关开发者工具更详细的介绍可以查看 《开发者工具介绍》 。

打开小程序开发者工具,用微信扫码登录开发者工具,准备开发你的第一个小程序吧!

1.5 创建第一个小程序

 新建项目选择小程序项目,选择代码存放的硬盘路径,填入刚刚申请到的小程序的 AppID,给你的项目起一个好听的名字,勾选 "不使用云服务" (注意: 你要选择一个空的目录才可以创建项目),点击新建,你就得到了你的第一个小程序了,点击顶部菜单编译就可以在微信开发者工具中预览你的第一个小程序。  

微信小程序 ——入门介绍及简单的小程序编写,微信小程序,java,微信小程序,小程序

先选择一个别人写好的模版预览效果

微信小程序 ——入门介绍及简单的小程序编写,微信小程序,java,微信小程序,小程序

OK,现在创建一个自己写的小程序,一定要选择js模版

微信小程序 ——入门介绍及简单的小程序编写,微信小程序,java,微信小程序,小程序

预览:

微信小程序 ——入门介绍及简单的小程序编写,微信小程序,java,微信小程序,小程序

二、小程序目录结构及入门案例

2.1 目录结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:

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


一个小程序页面由四个文件组成,分别是:以后缀名结尾的(js、json、wxml、wxss) 

微信小程序 ——入门介绍及简单的小程序编写,微信小程序,java,微信小程序,小程序

打开app.json公共配置文件,可看到pages数据在这里一个文件夹代表一个页面,也就是indexlogs两个页面

微信小程序 ——入门介绍及简单的小程序编写,微信小程序,java,微信小程序,小程序

这里要注意配置的页面的顺序,排在第一,刚打开小程序就显示这个界面。

2.2 入门案例

2.2.1 创建界面

配置pages时保存后,左侧会自动生成页面文件。

微信小程序 ——入门介绍及简单的小程序编写,微信小程序,java,微信小程序,小程序

微信小程序 ——入门介绍及简单的小程序编写,微信小程序,java,微信小程序,小程序

2.2.2 设置标题

pages/user/user.json

微信小程序 ——入门介绍及简单的小程序编写,微信小程序,java,微信小程序,小程序

2.2.3 编写WXML文件

参考 小程序文档WXML模版 

微信小程序 ——入门介绍及简单的小程序编写,微信小程序,java,微信小程序,小程序  

引用js文件username属性,设置一个按钮点击事件

微信小程序 ——入门介绍及简单的小程序编写,微信小程序,java,微信小程序,小程序

2.2.4 编写JS文件

定义数据和点击事件方法 

微信小程序 ——入门介绍及简单的小程序编写,微信小程序,java,微信小程序,小程序

 修改页面头部标题背景和字体颜色

微信小程序 ——入门介绍及简单的小程序编写,微信小程序,java,微信小程序,小程序

2.2.5  编写WXSS演样式文件

为class属性值为userinfo模块设置样式 

微信小程序 ——入门介绍及简单的小程序编写,微信小程序,java,微信小程序,小程序

2.3 案例效果演示

最后就呈现出一个简单的功能界面 :

微信小程序 ——入门介绍及简单的小程序编写,微信小程序,java,微信小程序,小程序文章来源地址https://www.toymoban.com/news/detail-712942.html

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

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

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

相关文章

  • 微信小程序入门一~结构介绍

    一、结构介绍: ☆pages: 用来存放所有小程序的页面   .js: 页面的脚本文件,存放页面的数据、事件处理函数等   .json: 当前页面的配置文件,配置窗口的外观、表现等   .wxml: 页面的模板结构文件   .wxss: 当前页面的样式表文件 utils:用来存放工具性质的模块(如:格式化时

    2024年02月10日
    浏览(40)
  • 微信小程序怎么开发自己的小程序?

    现在很多人都想要开发自己的微信小程序,却不知道通过什么方式进行开发,那么关于微信小程序怎么开发自己的小程序,下面给大家讲解一下。 微信小程序怎么开发自己的小程序有哪些方式?可大致分为: 1、自己开发,要编程写代码,需要懂代码知识 2、下载代码模板进

    2024年02月05日
    浏览(53)
  • 创造你的第一个微信小程序:简单易懂的入门指南

    1.1 介绍 小程序是一种新的开放能力,开发者可以快速地开发一个小程序。可以在微信内被便捷地获取和传播,同时具有出色的使用体验。 官方网址 :https://mp.weixin.qq.com/cgi-bin/wx?token=lang=zh_CN 小程序主要运行微信内部,可通过上述网站来整体了解微信小程序的开发。 首先 ,

    2024年02月05日
    浏览(101)
  • 微信小程序使用MQTT的小例子

    本文章大部分内容来自MQTT官方教程,有需要的可以去MQTT官网查看,这里只分享一下自己的使用过程。谢谢大家观看! 首先我们使用微信开发者工具创建一个空项目。 不使用云开发,不使用模板。 然后我们去MQTT网址,或者下方链接下载mqtt.mini.js 这个可以下载mqtt.mini.js http

    2024年04月13日
    浏览(36)
  • 微信小程序-获取不限制的小程序码(二)

    获取小程序码 | 微信开放文档 与 createQRCode 总共生成的码数量限制为 100,000,请谨慎调用  HTTPS 调用 与 wxacode.get 总共生成的码数量限制为 100,000,请谨慎调用 HTTPS 调用 获取不限制的小程序码 | 微信开放文档 接口应在服务器端调用,详细说明参见服务端API。 本接口支持云调

    2024年02月07日
    浏览(50)
  • 微信小程序生成一个天气查询的小程序

    页面结构:包括一个输入框和一个查询按钮。 页面逻辑:在用户输入城市名称后,点击查询按钮,跳转到天气详情页面,并将城市名称作为参数传递。 index.js index.wxml index.wxss weather.js weather.wxml weather.wxss 首页和天气详情页。用户可以在首页输入城市名称后,点击查询按钮跳转

    2024年02月04日
    浏览(54)
  • 微信小程序 |做一款跟ChatGPT下五指棋的小程序

    敢问世间万物,何以解忧? 时下最为火爆的 ChatGPT 想必够资格来回答一下这个问题。 要想当年 AlphaGO 打败世界围棋高手李世石,就展露出AI的惊人实力,时隔多年,AI领域在憋了这么多年之后,现如今, ChatGPT 4 大杀四方,各行各业无不为之震撼! 借用刚召开的新程序员大会

    2024年02月02日
    浏览(48)
  • 微信小程序 |做一款跟ChatGPT下五指棋的小程序-(源代码)

    准备工作 : 确保您已经注册了微信小程序开发者账户,并且安装了微信开发者工具。 如果您想要与ChatGPT集成,您还需要注册OpenAI的开发者账户并获取API密钥。 项目结构 : 创建一个新的微信小程序项目,可以使用微信开发者工具来创建。 在项目中设置好基本的目录结构,

    2024年02月20日
    浏览(43)
  • Java生成微信小程序二维码,5种实现方式,一个比一个简单

    先介绍一下 项目场景 ,主要是通过微信小程序二维码 裂变分享 ,每个账号有专属邀请二维码,分享出去,有新人扫码入驻,就可以得到现金奖励或红包奖励。当然,产品设计会更丰富,不止有裂变模式,还有渠道推广模式,还有各种奖励规则,但核心实现都是生成二维码。

    2024年02月03日
    浏览(57)
  • 微信小程序用什么编写

    微信小程序是一种轻量级的应用程序,可以在微信中直接使用,而无需下载和安装。由于它的快速和简便,越来越多的企业和开发者开始将微信小程序作为他们的主要开发目标。那么,微信小程序到底用什么编写呢? 微信小程序可以使用多种编程语言和工具来编写,其中最常

    2024年02月12日
    浏览(41)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包