自助网站建设哪家优惠,网站收录查询,金华做公司网站,营销技巧培训1、小程序开发工具基础 #xff08;1#xff09;菜单栏#xff1a;可以对开发工具进行一些简单的设置#xff0c;还可以在帮助一行获取学习相关api文档 #xff08;2#xff09;模拟器显示栏#xff1a;每当我们在进行便写好代码之后#xff0c;通过编译可以在模拟显示…1、小程序开发工具基础 1菜单栏可以对开发工具进行一些简单的设置还可以在帮助一行获取学习相关api文档 2模拟器显示栏每当我们在进行便写好代码之后通过编译可以在模拟显示栏上看到效果、 3代码编辑栏对于业务需求编写我们所需要的相关代码的地方。 4编译栏主要的作用就是我们在编译的过程中可以看到编译的细节包括编译出现的错误等等。
2、创建一个项目 备注appid在邮箱注册的微信小程序中
3、项目的具体结构 1pagepage页面存放小程序的所以页面 2Utils存放工具性质的模块 3app.js:小程序项目的入口文件 4app.json小程序项目的全局配置文件、 5app.wxss:小程序项目的格式样式文件 6project.config.json:项目配置文件 7sitemap.json:用来配置小程序或者页面是否允许被微信索引
3.1page页面的详解 每个页面都是以单独的文件夹组成每个文件夹包括四个部分 1 XXX.js页面的脚本文件存放页面的数据、事件处理函数 2XXX.json当前页面的配置文件配置窗口的外观、表现等 3XXX.wxml当前页面的模板结构文件 4XXX.wxss当前页面的样式表文件
4 小程序代码的详解
4.1JSON配置文件
json是一种数据格式在小程序开发中充当配置的作用小程序开发中json一共有四种构成 1app.json app.json是全局配置包括小程序所有页面的路径、窗口外观、界面的表现、底部的tab等等 apage配置项 用来配置当前小程序的所有页面的路径 bwindow配置项 全局定义小程序所以页面的背景色和文字颜色等等 cstyle配置项 全局定义小程序组件所使用的样式版本 dsitemaplocation配置项 用来指明sitemap.json的位置 2project.config.json project.config.json配置主要是记录小程序开发工具所做的个性化设置 aseting配置 保存了编译相关的配置 bappid配置 保存了微信小程序账号appid 3页面.json 对于页面的窗口外观进行配置页面的配置会覆盖app.json中的配置 4sitemap.json sitemap.json页面主要的作用就是配置小程序页面是否被允许微信索引 注意sitemap的索引提示默认是开启的如果需要关闭在project.config.json文件中的setting配置项中checkSiteMapfalse
5 新建一个小程序页面
在app.json中page配置项目添加一个自己想要新建的页面如下图然后保存后pages文件夹下就会自动生成新建的页面 如何修改项目首页 在app.json文件中的pages配置项中的顺序对换就可以进行项目首页的修改
6 了解wxml模板
6.1什么是wxml
wxml是小程序设计的一套标签语言用来构建小程序页面的结构。其本质与网页设计的html类似
6.2 wxml与html的区别
1标签名称不同
htmldiv、span、img、awxmlview、text、image、navigator
2属性节点不同
a href超链接/anavigator urlpages/list/list/nabigator
3提供类似于vue中的模板语法
数据绑定列表熏染条件渲染
7 了解wxss
7.1什么是wxss
wxss是一套样式语言用于描述wxml的组件样式与网页中的css类似。7.2 wxss与css的区别
1新增了rpx尺寸单位css中要手动进行像素的单位换算例如rem wxss底层支持新的尺寸单位rpx在不同大小的屏幕上小程序会自动进行换算 2提供了全局样式和局部样式 项目中的app.wxss会作用与所有小程序页面 局部的页面.wxss只会作用与当前页面 3wxss仅支持部分css选择器 .class和#id element 并集选择器、后代选择器 ::after和::before等伪类选择器
8 了解.js文件
8.1 小程序中的.js文件
在小程序中我们仅仅是看页面是不够的需要小程序通过.js文件来处理用户的数据例如响应用户的点击、和获取位置等等。
8.2 小程序中的js文件分类
app.js文件 是整个小程序的入口文件通过调用app函数来启动整个小程序。页面中的js文件 是页面的入口文件通过调用page函数来创建并运行页面。普通的js文件 是普通的功能模块文件用来封装公共函数或属性供页面使用。
