学习微信小程序day01

学习微信小程序day01

Scroll Down
  1. 使用微信开发工具开始一个项目,去微信公众平台申请一个账号选择小程序,即可获取APPID,项目会默认生成一些文件如下: image.png
  • 首先是app.json文件,它是小程序的全局配置,包括了所有的页面路径,所有的页面的顶部颜色和字体颜色等。
  • project.config.json文件是小程序的自身的配置,这些配置会自动保存在当前登录的账户下,在其他设备进行开发登录当前账户,所有的配置会同步。
  • app.wxss就相当于css主要负责页面样式布局等。
  • app.js是书写一个js脚本,完成逻辑交互,假设我在wx.wxml文件中定义了一个按钮并给这个按钮绑定点击事件,那么就可以在js文件中通过选择器获取到当前这个按钮,并书写触发点击事件之后需要执行的函数。这与我们普通的前端开发中的js并无多少区别。
  1. 我们需要在一个新的页面开始学习,只需要在app.json文件pages数组下添加需要的页面即可如图: image.png
  • 然后编辑就会在pages文件下生成wxml文件夹并包含一些必须得文件 image.png
  • 我们就可以在index.wxml文件中书写标签,并在index.js文件中给标签动态的绑定数据完成页面的渲染,当然也可以直接给标签绑定数据。这里在index.wxml中定义一个text标签,并在js文件中给该标签动态的赋值。 image.png
  • 在js文件中页面需要展示的数据都写咋data中 image.png
  • 这里编辑代码,就可以在页面上显示当前时间 image.png
  • 当然在这些标签中也可以写一些逻辑语法,这有点类似vue,只不过在微信小程序中需要以wx:开头,如果需要完成判断则在标签属性上使用wx:if="\{\{\}\}",需要注意的是,js可以动态绑定的数据要求变量必须以\{\{变量\}\}格式书写 image.png
  • 这里使用的if和elif完成多重的判断来渲染页面,当然也可以使用列表渲染,只要满足条件,当前列表下的数据全都被渲染,如图: image.pngimage.png
  • 同样在标签属性中也可以使用循环来渲染数据,使用wx:for来完成循环遍历一个数组,首先在js文件中定义一个数组 image.png
  • 循环遍历这个数组,这里的index代表着数组中数据的下标,item.message则是数组中每一个数据 image.pngimage.png
  • 还可以使用wx:for-item="变量名",使用wx:for-index="下标"这种方式来定义数组变量名和下标 image.png
  • 在使用wx:for的时候尽量指定wx:key,这里并不能完全理解,百度到的结果是有key的话,当前数据的数据发生改变,会通过key识别组件,渲染效率高。
  1. 模板,如果一个代码块需要反复的用到就可以将这个代码块定义为一个模板,然后就可以在不同的地方使用。假设需要遍历一个数组,判断数组中的数据是奇数还是偶数。
  • 定义两个模板,一个输出偶数,一个输出奇数 image.png
  • 使用循环遍历数组,分别输出odd或者even image.png
  1. 引用,比如说我在这个item.wxml页面中需要使用到index.wxml中的模板,就可以通过引用,类似于Java中的导包 image.pngimage.png
  • 引用不具有递归性,也就是现在有a.wxml引用b.wxml,b.wxml引用c.wxml,那么a.wxml并不能引用c.wxml中的模板。
  1. 通用属性,所有在wxml文件中书写的标签都有6个共同的属性。
  • id属性,整个页面中唯一,类型String,类似于html中的id属性,代表着组件的唯一标识。
  • class属性,类似于在html中的类选择器,可以在wcss文件中定义样式,类型String。
  • style属性,组件的内联样式,写在wcss文件中的称为外联样式,类型String
  • hidden属性,这个跟html中可以书写的位置不一样,html只能书写在form表单中。不过同样代表着组件是否显示。类型Boolean
  • data-*属性,这里理解的不是很透彻,应该是类似于html上的function(),这个组件如果触发,则执行对应的函数。
  • bind*/catch*属性,这个也不是很理解,我的理解应该是给当前的组件绑定一个事件。
  1. wxss样式,wxss样式分为三种 image.png
  • 第一种是直接在一个文件夹中创建wxss文件,如图中在test文件夹中创建的zzz.wxss文件,这种称为其他样式,可以被公共样式和页面样式引用。
  • 第二种是通过在app.json文件中pages数组中直接添加一个页面自动生成的例如index.wsxx,这种称为页面样式。
  • 第三种就是app.wxss了,它是全局样式,这里写的样式会被应用到所有的页面。
  • wxss中跟html中css对于尺寸的表达不一样,在html中的css表达尺寸使用的是px,而在wxss中表达尺寸使用的rpx,差别在于一张图片你使用px描述尺寸,如果换了一个设备,从iPhone11换到iPhone 11 pro max那么这张图片的大小不会变,但是两边的留白会变多。这样整体的布局就会发生改变。
  • wxss的引用,跟wxml的引用不同,wxml是,而wxss的引用是@import '路径',路径里填写需要引用的wxss的路径。这样在发起请求的时候就会加载两个wxss文件。
  • 内联样式,也就是在标签内使用style属性给当前标签内容添加样式 image.pngimage.png
  • 当然可以通过动态绑定去动态的更新样式 image.pngimage.png image.png
  1. wxss的选择器,wxss的选择器总共有五种,这里只挑常用的三种来说。 image.png
  • 第一种就是id选择器,与css中的选择器类似,#id就可以获取到当前这个ID的标签。
  • 第二种就是class选择器,它的优先级次于id选择器。
  • 第三种就是element元素选择器,它的优先级次于class选择器
  1. JavaScript脚本,那就不得不说说ECMAScript,JavaScript是ECMAScript的一种实现。浏览器中JavaScript和nodejs中的JavaScript不一样。在浏览器中的JavaScript它包含ECMAScript和BOM和DOM。nodejs中的JavaScript包含ECMAScript,NPM和Native,而小程序中的JavaScript包含ECMAScript和小程序框架和小程序API
  • 因为不同的平台对es语法的支持不同,在有些平台不支持es6语法,这就需要在开发的时候讲语法转换打开,这样可以自动将es6语法转换为es5语法。
  • 在index.js定义了一个方法,这个方法需要在item.js中使用,就需要使用module.exports将这个方法导出 image.png
  • 在item.js中使用的时候就可以require来接受这个方法 image.png
  • 当然也可以直接导入一个指定js文件
var common= require('common.js')
  • 浏览器中js的加载顺序也是跟js的先后顺序一样,比如说我们使用jQuery easyui的时候会先引入jQuery再引入jQuery easyUI。而在小程序中js的加载顺序就不一样了。
  • 在小程序中js的加载顺序,app.js是入口,这里面按照require的模板顺序来执行js
  • 当app.js执行完之后,会按照app.json中pages的顺序一一加载js
  1. 变量作用域,在文件中声明的变量和函数只有在该文件中生效,不同的文件可以声明相同的变量。
  • 可以定义全局变量,在item.js定义一个全局变量 image.png
  • 在index.js中使用这个全局变量 image.png
  • 在这里出现了一个错,控制台并不能输出这个全局变量显示undefined,这是因为js的执行顺序,它先执行了index.js,这个时候我们并未定义全局变量,所以显示未undefined,修改js执行的顺序 image.png