首页 > 编程语言 >学小程序还不懂代码结构?——每天三分钟玩转小程序2

学小程序还不懂代码结构?——每天三分钟玩转小程序2

时间:2023-01-03 16:06:25浏览次数:66  
标签:文件 微信 配置 程序 js json 玩转 学小 页面


学小程序还不懂代码结构?——每天三分钟玩转小程序2_json

上回我们分分钟创建了一个小程序,有没有拿给心爱的女神秀一下呢?

扫这里的二维码就可以了,手机上就能看了,还等什么!

学小程序还不懂代码结构?——每天三分钟玩转小程序2_json_02

就是下面这个性感的界面,看到我骚气的微信头像了。

学小程序还不懂代码结构?——每天三分钟玩转小程序2_html_03

小程序有哪些目录?

这一会我们来了解下小程序的项目结构。

小程序目录结构非常的纯粹,根目录下就两个目录:

  • ​pages​​ 存放所有的页面
  • ​utils​​ 存放工具函数,也就是公共函数,比如运算函数、获取时间等工具。下面就一个utils文件,我就不做介绍了

学小程序还不懂代码结构?——每天三分钟玩转小程序2_json_04

pages 是放页面的目录

​pages​​​ 下每个目录就是一个页面,比如上图中就有两个页面,别看有个页面叫​​logs​​,他就是披着羊皮的狼就是来误导人的,他就是个页面。

学小程序还不懂代码结构?——每天三分钟玩转小程序2_搜索_05

每个页面一定有四个文件,他是约定好的,每个文件都有作用,创建页面的时候自动生成四个文件,他们必须具有相同的路径与文件名。

学过前端的都知道,​​js​​​是写动态效果的,​​css​​​写样式的,​​html​​是页面。这里也不例外,只是改了个名字。

学小程序还不懂代码结构?——每天三分钟玩转小程序2_搜索_06

js 是这个页面的后端

​js​​​ 里,​​onLoad​​​是页面加载的时候会调用的函数,​​data​​存放页面用到的数据,还有些自定义函数这个我们后面再说。

学小程序还不懂代码结构?——每天三分钟玩转小程序2_搜索_07

学小程序还不懂代码结构?——每天三分钟玩转小程序2_搜索_08

json 是微信提供的页面配置

​json​​是页面配置,我搞一个丰富点的例子。

{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}

比如上面这个​​index.json​​文件,记录了导航栏背景颜色、导航栏标题颜色、导航栏标题文字内容、窗口的背景色、下拉 loading 的样式。详细配置在这里有记录,我们只要知道这个文件是干嘛的就可以了。

​https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html​

wxml 和 html 的功能相同

学小程序还不懂代码结构?——每天三分钟玩转小程序2_搜索_09

wxml 就是写标签专用的,页面展示的各种元素就在里面了。

学小程序还不懂代码结构?——每天三分钟玩转小程序2_搜索_10

比如上面这张图就是刚刚的页面,唯一和 ​​html​​ 不同的是,这里多了些微信官方提供的标签。

wxss 是写样式的

学小程序还不懂代码结构?——每天三分钟玩转小程序2_html_11

没错这就是和css一样的语法

学小程序还不懂代码结构?——每天三分钟玩转小程序2_html_12

utils 目录就是专门放公共函数的

学小程序还不懂代码结构?——每天三分钟玩转小程序2_json_13

根目录下的几个系统文件

我们刚刚了解了 ​​pages​​​ 下每个页面的四个文件,​​utils​​ 目录的作用,会发现有几个文件不在目录里。

学小程序还不懂代码结构?——每天三分钟玩转小程序2_html_14

​app.js​​​ 同页面中的 ​​js​​ ,一个作用是配置小程序进来做哪些操作,比如获取用户登陆状态。另一个作用是保存全局变量

学小程序还不懂代码结构?——每天三分钟玩转小程序2_html_15

​app.json​​ 一样是整个小程序的配置,页面配置可以覆盖总配置,唯一不同的是要在这注册各个页面。

​app.wxss​​ 全局样式,可能被页面样式覆盖。

​project.config.json​​ 这是一个项目配置文件,比如项目的名字,appid等等,别管他具体配置了啥,全是自动的。只要这个文件在,你所有的个性化配置都会在。

​sitemap.json​​ 小程序内搜索用的,配置哪些页面允许微信的爬虫搜索。啥意思,就是在搜一搜里面搜索的时候能发现你这个页面。

以上。

实践出真知!今天的任务是,打开自己的微信开发者工具,一个一个的点开示例文件,看看里面的内容,相信你肯定能很快理解整个项目的运行流程了!


学小程序还不懂代码结构?——每天三分钟玩转小程序2_搜索_16


标签:文件,微信,配置,程序,js,json,玩转,学小,页面
From: https://blog.51cto.com/u_12392289/5986057

相关文章

  • 每天三分钟玩转Git(完结)
    点击上方“编程三分钟”,马上关注,每天早上8:50准时推送。第1部分 预备知识第1章预备知识01- ​​预备知识​​ 第2部分 Git核心第2章Git常用操作......
  • 忽略不想提交的文件- 每天三分钟玩转Git(10)大结局
    “ 小心别把你的密码提交到git上!!——编程三分钟”第10篇忽略不想提交的文件什么时候我们想忽略一些文件呢?第一种:我们根本就不想某些文件出现在git库里,比如日志......
  • 小程序 SHA1加密算法使用
    创建一个js文件,或写入util.js中//SHA1加密functionencodeUTF8(s){vari,r=[],c,x;for(i=0;i<s.length;i++)if((c=s.charCodeAt(i))<0x80)r.pu......
  • 小程序开发总结三 弹窗 动态class 发送请求 设置本地储存过期时间
    弹窗<buttonclass="get_codebindtap="get_login">{{get_code}}</button>get_login(e){wx.showToast({title:'请输入手机号码',icon:'none',......
  • 玩转OpenHarmony社交场景:即时通讯平台
    一、简介本样例是基于即时通讯(Instantmessaging,简称IM)服务实现的OpenAtomOpenHarmony(简称“OpenHarmony”)应用,允许两人或多人使用互联网即时地传递文字、图片、文件、语音......
  • Intellij IDEA 在DEBUG模式下如何不执行后续代码直接停止程序
    IntellijIDEA在DEBUG模式下如何不执行后续代码直接停止程序第一步:打断点第二步:找出控制台idea可以使用快捷键:两下alt,点击左下角的debug第三步:出现当前页面然后,在......
  • 课程规划-每天3分钟玩转小程序
    嘿,乡亲们!是不是以为我要放鸽子了?我是会放鸽子的人?!12点没到,差一分钟都不算!这一次的专题是小程序开发,按之前的规划每周一、三、五更新一篇。 《每天3分钟玩转小程序》是一个......
  • 撤销远程提交-每天三分钟玩转Git (6)
    第6篇撤销远程提交要是我们"不小心"把骂老板的话给提交到远程了,马上其他同事都要看到了,要是被发现就全完了,这个时候我们还来得及撤销吗?创建一个犯罪现场(手抖提交到......
  • 撤销本地提交-每天三分钟玩转Git (5)
    第5篇撤销本地提交上一章我们一起入门学习了​​git的基本概念​​​和​​git基础操作​​,包括提交和同步代码、使用分支、出现​​代码冲突的解决办法​​、紧急保......
  • 实现可移动悬浮按钮(微信小程序/H5移动端html)
    微信小程序实现方案:我们可以利用微信小程序的内置组件轻松实现!1.将整个屏幕用movable-area组件覆盖,2.在movable-area内部添加一个movable-view实现自由滑动。3.重点:CSS属......