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

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

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

3. 小程序项目结构 

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

文件类型必须作用
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() {}
})

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

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

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

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

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

 

 4.3 给小程序新增一个页面

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

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

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

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

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/55305.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue2 第十九节 Vuex (一)

1.理解Vuex 2.Vuex工作原理 3.求和案例 4.Vuex的开发者工具 一.理解Vuex ① 概念&#xff1a;专门在Vue中实现集中式状态&#xff08;数据&#xff09;管理的一个Vue插件&#xff0c;对vue应用中多个组件的共享状态进行集中式的管理&#xff08;读/写&#xff09;&#xf…

JMeter(二十四)、使用吞吐量控制器实现不同的用户操纵不同的业务

一、需求 需求&#xff1a;博客系统&#xff0c;模拟用户真实行为&#xff0c;80%的用户阅读文章&#xff0c;20%的用户创建文章&#xff0c;创建文章的用户随机的删除或者修改文章。 二、脚本实现 80%的用户查看文章 20%用户创建文章 根据post_id是否能整除2&#xff0c;决…

Lua 使用 —— IO 操作

一、前言 Lua 语言是以一个脚本存在&#xff0c;所以他自身不会提供太多和外部交互的机制。需要交互则由宿主提供或是由外部库。 接下来分享下如何使用以 iso c 作为宿主&#xff0c;进行标准库的 io 操作。 二、io.input、io.output 1、io.input io.input(filename) 会以…

【windows】windows上如何使用linux命令?

前言 windows上的bat命令感觉不方便&#xff0c;想在windows上使用linux命令。 有人提供了轮子&#xff0c;本文简单介绍一些该轮子的安装与使用&#xff0c;希望能够帮助到和我有一起需求的网友。 我的答案是busybox。 1.安装busybox.exe 在这个网站上安装busybox busyb…

如何设计一个自动化测试框架

在进行自动化框架设计之前我们先来看两个问题&#xff0c;什么是自动化框架&#xff0c;设计的时候应该注意什么原则&#xff0c;然后该怎么做&#xff1f;本文会以一个web端的UI自动化测试框架设计为例 Python自动化测试&#xff1a;2023最新合集Python自动化测试开发框架【全…

fishing之第四篇使用案例一模拟登陆口

文章目录 一、访问钓鱼平台二、Sending Profiles&#xff08;发件人邮箱配置&#xff09;三、User&Groups&#xff08;接收人邮件列表&#xff09;四、Landing Pags&#xff08;钓鱼页面配置&#xff09;五、Email Templates&#xff08;邮件内容配置&#xff09;六、Campa…

【C++】二叉搜索树的模拟实现

&#x1f307;个人主页&#xff1a;平凡的小苏 &#x1f4da;学习格言&#xff1a;命运给你一个低的起点&#xff0c;是想看你精彩的翻盘&#xff0c;而不是让你自甘堕落&#xff0c;脚下的路虽然难走&#xff0c;但我还能走&#xff0c;比起向阳而生&#xff0c;我更想尝试逆风…

AI介绍——chat gpt/文心一言/claude/bard/星火大模型/bing AI

AI体验 1. AI 介绍&#xff08;注册和使用&#xff09;1.1 Chat GPT1.2 文心一言1.3 Slack 上的 Claude1.3.1 Claude 介绍1.3.2 Claude 使用 1.4 Google的Bard1.4.1 Bard 介绍1.4.2 Bard 使用 1.5 科大讯飞的星火大模型1.5.1 星火大模型 介绍1.5.2 星火大模型 使用 1.6 new bin…

iOS Viper架构(中文版)【看懂这篇就够了】

完整源码地址 一、iOS_Viper iOS的Viper架构&#xff0c;作为一个从业多年的iOS开发者&#xff0c;我个人认为应该要会一点viper 二、前言 viper的设计模式在iOS开发中不流行&#xff0c;甚至是Swift中&#xff0c;也没有用&#xff0c;我认为比较可惜。作为iOSer,当你掌握…

2023年第四届“华数杯”数学建模思路 - 案例:随机森林

## 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 什么是随机森林&#xff1f; 随机森林属于 集成学习 中的 Bagging&#xff08;Bootstrap AGgregation 的简称&#xff09; 方法。如果用图来表示他们之…

electron+vue+ts窗口间通信

文章目录 一. 目的二.逻辑分析三. 代码示例 "types/node": "^20.3.1","vitejs/plugin-vue": "^4.1.0","vueuse/electron": "^10.2.1","electron": "^25.2.0","electron-packager":…

激荡十三年,消费金融进入“体验争夺战”的下半场

消费金融行业又开始涌动着变局。 先是一些老玩家悬着的心&#xff0c;终于落地。过去两年&#xff0c;消费金融是蚂蚁集团整改的关键板块。前不久&#xff0c;蚂蚁集团被监管部门开出71.23亿元的“罚单”&#xff0c;市场普遍认为这是利空出尽的信号。 与此同时&#xff0c;竞…