小程序从注册appid到熟悉静态微信特有标签

简介: 小程序从注册appid到熟悉静态微信特有标签

一、注册账号以及下载开发者工具

浏览器搜索"微信公众平台"后:

点击上方图片的小程序选项

image.png

点击小程序后,进入页面后会(下拉页面)出现如上页面

image.png

点击前往注册(并确保)

注册好之后我们重新进入微信公众平台网站,并由注册好的绑定的微信号扫二维码

image.png

进入首页后我们点击红色圈的部分,如上图

image.png

image.png

点击后出现如上选择,我们选择稳定版就ok了

二、创建项目文件

AppID是你在微信公众平台注册的appid(如下图)

image.png

点击上图红圈处自己创建的昵称(点击) 如下图

image.png

账号信息里面有自己的appid(我在这就不展示我的了哈~)

填写好appid之后,选择模板

 两个大选项(如果用到云开发就选择云开发,建议新手选择不使用云服务!)

我们选择不使用云开发,JavaScript基础模板就ok了,如上图


三、初始化开发者工具里面自动生成的代码


image.png

这时所有的代码以及pages里的文件我们都可以不要我们可以自己重新创建自己想要的文件项


如下:

image.png

都删除!(包括index文件项和logs文件项)

注意删除后,不要立即保存,我们想让开发者工具不刷新

1.我们先来到app.json文件中

image.png

appjson的pages里面的作用:每要创建一个像(index)这种文件项时,必须现在app.json里面的pages中配置一下

我们以(像创建一个名为:lqj的文件项)为例子:

"pages/lqj/lqj",

写完后我们再看我们的整个结构:

image.png

我们会发现我们虽然没有手动的,鼠标右键点击pages文件夹去手动创建lqj文件项,但是我们只要在appjson里面写了:

"pages/lqj/lqj",

这个注册文件项的代码后,就会帮我们自动生成一个lqj文件项并带着四个完成且崭新的.wxml\.js\.wxss\.json文件

image.png

此时我们创建好了我们想要的文件项之后,我们会发现下面的控制台里页不报错了(哎~就很nice)

image.png

image.png

image.png

image.png

看看上面四个图,人家开发者工具只要看到app.json中的pages中配置好了之后,就自动帮我们初始化所有生成的文件了~

首先我先声明一点,一个完好的网页也好,小程序也好都有三点:

我们以小程序为例子:

1.身体(wxml):wxml比喻成一个项目的身体

2.衣服(wxss):wxss比喻成一个项目的衣服(你见街上那个人不穿衣服,变态除外哈~)

3.动作(js):js比喻成一个项目要做的动作(你看那个完美的小程序不会动?嗯?嗯?嗯?植物程序?是吧!)


四、基础的静态页面开发(wxml)

1.微信小程序的的标签有:

<view></view> :可以在里面写东西,以及嵌套别的标签等

<text></text>:只能在里面写字符串

<image></image>:只能在里面放图片

<button></button>:这是一个点击按钮标签,当我想要实现点击事件时需借助它

<navigator></navigator>:这是一个跳转标签,当我们想要跳转页面时,需借助它

一、<view></view> :可在里里嵌套下面标签

1.嵌套<text></text>

image.png

2.嵌套<image></image>

image.png

3.嵌套 <button></button>

image.png

4.嵌套<navigator></navigator>

image.png

二、<text></text>:只能在里面写字符串


举例:

image.png

三、<image></image>:只能在里面放图片

image.png

四、<button></button>:这是一个点击按钮标签,当我想要实现点击事件时需借助它


五、 <navigator></navigator>:这是一个跳转标签,当我们想要跳转页面时,需借助它













目录
相关文章
|
11月前
|
缓存 小程序 前端开发
商城/点餐/家政类小程序源码合集_微信抖音小程序源码开发从入门到精通实战
本文系统讲解如何利用现有源码快速开发商城、点餐、家政类微信/抖音小程序,涵盖环境搭建、核心功能实现、多平台部署与优化,提供完整技术方案。实战导向,助力开发者高效入门与落地。
|
11月前
|
存储 小程序 Java
热门小程序源码合集:微信抖音小程序源码支持PHP/Java/uni-app完整项目实践指南
小程序已成为企业获客与开发者创业的重要载体。本文详解PHP、Java、uni-app三大技术栈在电商、工具、服务类小程序中的源码应用,提供从开发到部署的全流程指南,并分享选型避坑与商业化落地策略,助力开发者高效构建稳定可扩展项目。
|
小程序 前端开发 Android开发
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
2664 29
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
|
JSON 监控 小程序
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
1768 14
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
|
存储 移动开发 小程序
校园圈子系统小程序(圈子论坛、私信聊天、资料共享、二手交易、兼职,跑腿)开源码开发/微信公众号、小程序、H5多端账号同步/搭建多城市的综合社交生活平台
基于开源技术栈构建的校园圈子系统小程序,整合社交与生活服务功能,涵盖兴趣圈子、私信聊天、资料共享、二手交易、兼职跑腿等六大核心模块。通过多端账号同步(微信公众号/小程序/H5),实现数据实时交互,满足学生群体的多元化需求。项目精准锚定校园市场,以“社交+服务”双轮驱动,提供一站式解决方案,支持快速部署与多校区运营,同时具备广告、佣金、会员等多元变现能力,是打造校园生态的理想工具。
1701 3
校园圈子系统小程序(圈子论坛、私信聊天、资料共享、二手交易、兼职,跑腿)开源码开发/微信公众号、小程序、H5多端账号同步/搭建多城市的综合社交生活平台
|
小程序 JavaScript 前端开发
微信小程序开发全流程:从注册到上线的完整指南
这篇文章详细记录了微信小程序的完整开发到最终上线的每一个步骤。适合对小程序开发感兴趣的个人开发者或希望了解完整流程的学习者,涵盖了云开发、事件绑定、生命周期管理、组件使用等关键内容。
24760 14
|
小程序 数据安全/隐私保护 开发者
【02】微信支付商户申请下户到配置完整流程-微信开放平台申请APP应用-微信商户支付绑定appid-公众号和小程序分别申请appid-申请+配置完整流程-优雅草卓伊凡
【02】微信支付商户申请下户到配置完整流程-微信开放平台申请APP应用-微信商户支付绑定appid-公众号和小程序分别申请appid-申请+配置完整流程-优雅草卓伊凡
1485 3
|
人工智能 小程序 程序员
【视频测评 DEMO 参考】VSCode 神级 AI 插件通义灵码:完全免费+实战教程+微信贪吃蛇小程序
VSCode 神级 AI 插件通义灵码:完全免费+实战教程+微信贪吃蛇小程序
1355 8
|
Java 调度
任务和调度:理解批量处理的关键设计
本文讲的是任务和调度:理解批量处理的关键设计,维基百科给批量处理的定义是指在没有人工干预的情况下,由一个计算机程序基于一份批量的输入执行一系列的任务的一种处理模式。
4398 0
|
消息中间件 安全 搜索推荐
【小家java】Java线程池之---ForkJoinPool线程池的使用以及原理(下)
【小家java】Java线程池之---ForkJoinPool线程池的使用以及原理(下)
【小家java】Java线程池之---ForkJoinPool线程池的使用以及原理(下)