小程序从注册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>:这是一个跳转标签,当我们想要跳转页面时,需借助它













目录
相关文章
|
5天前
|
小程序 开发者
第一个微信小程序的初始化过程、小程序微信开发平台的下载、如何注册一个微信小程序的账号
这篇文章介绍了微信小程序的初始化过程,包括如何注册微信小程序账号、下载微信小程序开发者平台,并指导了新建小程序的详细步骤。
第一个微信小程序的初始化过程、小程序微信开发平台的下载、如何注册一个微信小程序的账号
|
7天前
|
小程序 前端开发 JavaScript
微信小程序实现微信支付(代码和注释很详细)
微信小程序实现微信支付(代码和注释很详细)
|
12天前
|
移动开发 JavaScript 开发工具
微信浏览器内 h5 直接唤醒 app 之 微信开放标签 wx-open-launch-app
微信浏览器内 h5 直接唤醒 app 之 微信开放标签 wx-open-launch-app
|
1月前
|
小程序 安全 搜索推荐
【微信小程序开发实战项目】——如何制作一个属于自己的花店微信小程序(3)
这是一篇关于微信小程序开发的文章摘要,作者介绍了如何创建一个网上花店小程序,旨在提供便捷的购花体验。小程序包含鲜花分类功能,允许用户按品种、颜色和用途筛选,确保快速找到合适的鲜花。它还提供了配送服务,保证鲜花的新鲜度。文章展示了`cash.wxml`、`cash.wxss`和`cash.js`的部分代码,用于实现分类和商品展示,以及`qin.wxml`、`qin.wxss`和`qin.js`,涉及商品详情和购买付款流程。代码示例展示了商品列表渲染和交互逻辑,包括页面跳转、数据传递和点击事件处理。文章最后提到了购买付款界面,强调了安全和便捷的支付体验。
68 0
【微信小程序开发实战项目】——如何制作一个属于自己的花店微信小程序(3)
|
1月前
|
小程序 前端开发
微信综合购物商城小程序ui模板源码
微信电商小程序前端页面,综合购物商城ui界面模板。主要功能包含:电商主页、商品分类、购物车、购物车结算、我的个人中心管理、礼券、签到、新人专享、专栏、商品详情页、我的订单、我的余额、我的积分、我的收藏、我的地址、我的礼券等。这是一款非常齐全的电商小程序前端模板。
51 4
|
1月前
|
小程序 开发者
【微信小程序】 微信小程序报错不在以下request合法域名列表中
【微信小程序】 微信小程序报错不在以下request合法域名列表中
121 0
|
1月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的微信智能招聘小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的微信智能招聘小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
1月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的微信社团小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的微信社团小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
1月前
|
API
支付系统----微信支付24--APlv3介绍,首先我们要引入支付参数,包含商户号,APPID、API秘钥,数字证书,用代码加载到应用程序当中,之后加载商户私钥,商户需要用私钥进行验签,微信平台接收商
支付系统----微信支付24--APlv3介绍,首先我们要引入支付参数,包含商户号,APPID、API秘钥,数字证书,用代码加载到应用程序当中,之后加载商户私钥,商户需要用私钥进行验签,微信平台接收商
|
1天前
|
小程序
微信小程序开发---购物商城系统。【详细业务需求描述+实现效果】
这篇文章详细介绍了作者开发的微信小程序购物商城系统,包括功能列表、项目结构、具体页面展示和部分源码,涵盖了从首页、商品分类、商品列表、商品详情、购物车、支付、订单查询、个人中心到商品收藏和意见反馈等多个页面的实现效果和业务需求描述。
微信小程序开发---购物商城系统。【详细业务需求描述+实现效果】

热门文章

最新文章