码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • 微信小程序 ——入门介绍及简单的小程序编写


    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、小程序注册

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

    2、激活邮箱

    3、用户登记注册

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

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

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

    1.4 安装开发工具

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

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

    1.5 创建第一个小程序

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

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

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

    预览:

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

    2.1 目录结构

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

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

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


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

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

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

    2.2 入门案例

    2.2.1 创建界面

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

    2.2.2 设置标题

    pages/user/user.json

    2.2.3 编写WXML文件

    参考 小程序文档WXML模版 

      

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

    2.2.4 编写JS文件

    定义数据和点击事件方法 

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

    2.2.5  编写WXSS演样式文件

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

    2.3 案例效果演示

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

  • 相关阅读:
    a16z公布AI产品流量排名,ChatGPT占据榜首
    mac虚拟机搭建&设置静态ip
    spring security 用户认证原理
    第十九章《类的加载与反射》第3节:反射
    Canvas文本
    踩坑记录(21--更新中)
    四、卷积神经网络(Convolution Neural Networks)
    [图论]哈尔滨工业大学(哈工大 HIT)学习笔记32-39
    高通cDSP简单编程例子(实现查询高通cDSP使用率、签名),RK3588 npu使用率查询
    35. 搜索插入位置、Leetcode的Python实现
  • 原文地址:https://blog.csdn.net/Justw320/article/details/133821589
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号