微信小程序开发【从0到1~入门篇】2023.08

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

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

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

3. 小程序项目结构 

微信小程序开发【从0到1~入门篇】2023.08,前端

一个小程序页面由四个文件组成,分别是:

文件类型 必须 作用
js 页面逻辑
wxml 页面结构
json 页面配置
wxss 页面样式表

》》》》》》》》》》》》》》

首先在Demo项目根目录下创建app.json文件,其内容如下

{
  "pages":[
    "pages/index/index"
  ]
}

然后在Demo项目根目录下新建pages目录,在pages目录下新建index目录,接着在index目录下创建两个文件index.wxml和index.js。
index.wxml的内容为:

<view>
  <view style="text-align:center;padding:200rpx">
    <text>{{motto}}</text>
  </view>
</view>

index.js的内容为:

Page({
  data: {
    motto: 'Hello World',
  },
  onLoad() {
  }
})

完成上述步骤后开发者工具的结构如下:

微信小程序开发【从0到1~入门篇】2023.08,前端

点击小程序开发者工具的“编译”命令,开发者工具会对demo项目的内容进行编译,并在微信开发者工具的模拟器界面上显示出Hello World结果

微信小程序开发【从0到1~入门篇】2023.08,前端

4.4 给小程序当前页面设置局部配置(index.wxml为例:修改背景,字体颜色)

1. 选择pages下面的index目录里面的index.json文件里面修改配置

微信小程序开发【从0到1~入门篇】2023.08,前端

  • 完整代码如下!可直接复制粘贴
    {
        "usingComponents": {},
        "navigationBarBackgroundColor": "#000000",
        "navigationBarTextStyle": "white",
        "navigationBarTitleText": "第一个小程序项目",
        "backgroundColor": "#eeeeee",
        "backgroundTextStyle": "light"
      }

微信小程序开发【从0到1~入门篇】2023.08,前端

 4.3 给小程序新增一个页面

1. 进入app.json 在第一个pages数组里面指定生成页面文件路径即可自动创建

注!想要哪一个页面先展示可按顺序排即可,第一个页面路径就是第一个显示的页面

微信小程序开发【从0到1~入门篇】2023.08,前端

4.5 给小程序设置拖把栏(全局配置)

1. 选择app.json进入后在文件内第一个花括号里面添加代码进行编辑,多个节点进行逗号分开

微信小程序开发【从0到1~入门篇】2023.08,前端文章来源地址https://www.toymoban.com/news/detail-632734.html

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

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

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

相关文章

  • 2023-08-22 Unity Shader 开发入门2 —— Shader 开发介绍

    ​ 计算机图形程序接口(Graphics API)是一套可编程的开放标准,不论 2D 还是 3D 游戏都需要这部分的底层 API 支持。 ​ 它本质上是软件,并不是硬件,是前人提前写好的调用系统硬件(GPU)绘制图形的代码。可以简单理解成是显卡厂商定义的一系列的底层的进行图形操作的加

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

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

    2024年02月03日
    浏览(59)
  • 微信小程序开发 小白入门篇

    能够知道如何创建小程序项目 微信开发者工具的使用、appID 的获取 能够清楚小程序项目的基本组成结构 app.js、app.json、app.wxss、pages 文件夹 能够知道小程序页面由几部分组成 wxml、wxss、json、js 能够知道小程序中常见的组件如何使用 view、text、image 能够知道小程序如何进行协

    2024年02月03日
    浏览(48)
  • 微信小程序开发入门教程

    🎉🎉欢迎来到我的CSDN主页!🎉🎉 🏅我是Java方文山,一个在CSDN分享笔记的博主。📚📚 🌟推荐给大家我的专栏《微信小程序开发实战》。🎯🎯 👉点击这里,就可以查看我的主页啦!👇👇 Java方文山的个人主页 🎁如果感觉还不错的话请给我点赞吧!🎁🎁 💖期待你的

    2024年02月08日
    浏览(41)
  • 微信小程序开发入门教程(十二)

    上一篇文章我们讲述了微信小程序的三个基础组件 icon 、 text 和 progress 。这些基础组件主要用途是进行信息展示,微信小程序除了信息展示还需要与用户交互,而表单是应用中获取用户输入的重要手段,它对于系统极其重要,用户在应用中输入的大部分内容都是在表单元素中

    2024年02月11日
    浏览(37)
  • 微信小程序开发入门需要学什么?

    微信小程序需要学习的知识点:注册与登陆、开发工具的安装、微信小程序的配置、样式、组件、数据渲染、网络请求API、获取用户信息API等,了解开发者工具、原生框架,模板语法、组件以及生命周期等。掌握微信小程序的开发过程,具备独立的完成小程序开发的能力,为

    2024年02月11日
    浏览(31)
  • 微信小程序开发实践入门教程

    随着微信小程序的火爆,越来越多的人开始关注 微信小程序开发 并加入开发大军中,而很多人对于如何开发微信小程序,并没有很好的思路和方法。因此,为了方便大家在学习、实践和应用的过程中能够少走弯路,本文将通过一篇关于微信小程序开发实践入门教程来为大家

    2024年02月06日
    浏览(36)
  • 微信小程序开发前后端交互快速入门

    目录 第 1 章 小程序特点 1.1 小程序特点概述 1.2 小程序配置 全局配置: app.json 页面配置: 页面名称.json sitemap 配置: sitemap.json 1.3 小程序框架接口 App Page 第 2 章 wxml 语法  2.1 数据绑定 初始化数据 使用数据 修改数据 2.2 事件绑定 事件分类 绑定事件 向事件对象传参 2.3 列表渲染

    2024年03月15日
    浏览(45)
  • 微信小程序开发入门与实战 ①(初始微信小程序)

    @作者 : SYFStrive   @博客首页 : HomePage 📜: 微信小程序 📌: 个人社区(欢迎大佬们加入) 👉: 社区链接🔗 📌: 觉得文章不错可以点点关注 👉: 微信小程序专栏🔗 💃: 感谢支持,学累了可以先看小段由小胖给大家带来的街舞😀 🔗: 阅读文章 👉 微信小程序 (🔥)

    2024年02月09日
    浏览(106)
  • 微信小程序开发教程:项目一微信小程序入门 课后习题

    《微信小程序开发教程》主编/黄寿孟 易芳 陶延涛 湖南大学出版社 目录 一、单选题 二、多选题 三、判断题 四、填空题 五、简答题 1.请简述微信开发者工具中调试器功能。 2.请简述微信小程序开发环境的搭建过程。 六、编程题 1.请创建一个空白项目,在页面中输出Hello W

    2024年02月11日
    浏览(52)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包