微信小程序是一种不需要下载安装即可使用的全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有“用完即走,不用关心是否安装太多应用”的使用体验。
微信小程序做成了一个开放式的平台,它让开发者可以将自己的想法做成微信小程序的服务放在平台上供人们使用。通过微信小程序的开发,应用将无处不在,随时可用。在进行开发之前,需要进行注册,绑定开发者等一系列操作。详情移步微信官方文档。
笔者观看的教学视频于2017年初拍摄,所以当时最新的开发者工具版本为0.11.122100版,现官方文档中提供的最新版本为1.02.1907112版本。
是真的不需要下载安装即可使用吗?
不是的,微信小程序的安装包小于1MB(最新版改为2MB),在用户点击使用的时候,就不到1MB的安装包,下载安装的时候,用户本人是感受不到的。
前端先制造假数据,可以将假数据在页面很好的展示之后再和服务器的数据进行相应的对接。
前端驱动服务器开发的设计理念。由此目的在于设计比较合理,api较方便。
前往开发工具下载地址去下载
下载完成之后,通过微信扫一扫打开开发者工具,选择新建项目
AppID选择使用测试号(因为注册小程序号比较麻烦)
其他选项设置好之后选择创建,进行创建新的小程序项目
平台会自动生成一个小程序HelloWorld的demo
此工具左边是效果区,右边是代码区。它有一个特点就是修改某些参数不需要编译就可以预览。直接Ctrl+S就可以看见修改的效果。
调试区用来打断点调试代码。点击上方菜单栏的调试工具按钮打开调试区。
在调试区的js文件:
带sm后缀的是用来打断点调试的文件,和写的代码是一样的。
不带sm后缀的是编译过后的文件,和写的代码也是一样的。只不过第一行出现了一个编译的信息。
1、不能上传和发布小程序
2、不能真机运行,只可以在PC模拟器中运行
3、录音、网络状态、罗盘、拨打电话等功能无法使用
4、获取用户信息的流程是模拟的而不是真实的
但是,不影响我们学习小程序开发
在debug的断点状态时,快捷键和Crome是一样的。
注:在打开调试区的状态下点击下图标注的按钮,可以单独将调试区打开一个窗口,并将Console折叠放在窗口下方。
和Crome的NetWork一模一样
鼠标停留在右边代码上面的时候左边页面显示对应的UI元素
模拟器的上面菜单栏有按钮切换前后台,用来模拟打开别的小程序,本程序在后台运行的动作。当后台运行时在小程序里会触发一个事件。
注:如何快速打开小程序api文档–点击上面菜单的:微信开发者工具–>关于–>打开api文档
生成HelloWorld小程序之后点击它的主页面进入一个子页面可以查看启动的日志信息。
注:下图的无限多个只是理论上的。过多的页面违背小程序的设计初衷。小程序的总体的压缩文件包的体积超过1MB将不能上传(最新版本上传限制在2MB)。
小程序自生成的目录结构
在app.json中设置打开的是哪个页面
P.S.:json文件是不可以随意加注释的。
图片大小px与rpx:
px在这里不是指图片属性的物理像素,而是Iphone6上的逻辑分辨率概念。Iphone6上物理分辨率和逻辑像素的2:1的关系。也就是说,在iphone6上面,2rpx=1px。
为了动态去适应不同分辨率的设备,我们用rpx(逻辑分辨率)做适应。设计图是0-750的像素,大小可以直接转化成rpx。
如何设置样式:
方式一(动态样式):在标签中加入style属性,写入当前标签样式
方式二(静态样式):写wxss文件–在标签上加入一个class属性,通过class选择器写css样式。wxss文件不需要单独去引用。因为注册的是以某名字为名名的所有文件。
例子:
wxml文件:
wxss文件:
用来将堆叠在一起的元素变规整,显示成列排布
colum:列排布
row:横向排布
align-items用来设置对齐版式,center表示左右居中
全局一样的样式可以提到全局的样式设置里面设置。
不能在容器中直接设置background-color的颜色。因为容器没有设置高度和宽度,它会自适应里面元素的高度和宽度。如果直接给一个高度的话,如果里面内容是一个动态内容,可能会超出规定的高度和宽度,造成内容溢出。
解决方案:
经过调试我们发现,系统在我们规定的view容器外面还包了一层名叫page的容器。我们去设置page的样式
设置导航栏背景色:
在app.json中有window配置项 用于设置小程序的标题、状态栏、导航条、窗口背景色。
其中navigationBarBackgroundColor用来设置导航栏背景色。
1个pt可以有1个px构成,也可以有2个,3个甚至更多构成
一个pt下px越多,图像显示越细腻。两倍已经达到了人眼能够分辨的极限,所以plus版本并不能比6和6S更加清晰。
iphone6下2个px构成1个pt
PPI=px开根号/屏幕尺寸
因为微信小程序显示的375是逻辑分辨率,而设计图一般给的是物理分辨率。
使用rpx作为单位,小程序会自动在不同的分辨率下进行转换。
在iphone6的尺寸进行设计的话,一个像素就是一个rpx。
不是所有的单位都适合用rpx
比如,文字不适合用rpx,不然设备自适应以后看不清文字。
错误VM285:1 pages/index/index.js 出现脚本错误或者未正确调用 Page()
需要在这个js里写一个page方法,里面什么都不写就可以。
1、在page文件夹下新建posts文件夹,在其中建立.js.wxml.wxss文件,并在.js文件中填入空的Page函数(如果不填会报错)。
2、将原先的app.json的pages属性数组之中加入新建的.wxml文件的地址(当把它放在第一个的时候,运行时默认先显示它)。
注:快捷键F1打开命令面板,有很多快捷选项
swiper标签代表轮播图,里面的字标签swiper-item代表每个图片。
在子页面的json文件里可以配置页面的导航栏颜色等配置,从而不影响全局的配置。
但是只能配置window这一个参数的属性,所以window就不标了。直接将app.json里的window参数展开,平铺到子页面的json文件中。
绝对路径与相对路径
部分代码示例
posts.wxss
经验:水平用rpx,垂直用px。(水平如果元素少到不可能发生换行也可用px)
在编码过程中,可以使用脚本文件将服务器的数据对接到小程序中。
编写脚本文件时,在js文件中输入page,开发工具会生成一个默认的脚本文件结构。
js文件所有的脚本代码都会在名叫Page的json结构体中运行。
其中包含下列生命周期函数:
应用的生命周期:
先进行页面初始化(onLoad)—>页面显示(onShow)–>页面渲染完成(onReady)
注:js脚本中可以自定义函数进行调用
在网页开发的过程中,我们要把一个数据显示到页面上的操作是:
先获取DOM对象,再对获取的节点的数据进行操作。
在小程序中提倡数据优先的思想。
在小程序中不支持DOM,所以在小程序的开发中的操作应该是:
在js脚本的data属性中以json格式放入数据,在wxml文件中使用双大括号调用。
示例如下:
js脚本:
wxml:
小程序在这里实现的数据绑定是单向数据绑定
也就是说,数据可以从脚本文件向wxml文件传递的时候可直接赋值,但是如果数据被wxml文件所改变,脚本文件中的数据不会发生变化。如果要通过wxml改变脚本文件中的数据,则需要采取事件传递的形式。
显示从服务器动态获取的数据
假设数据是从脚本文件向服务器动态获取的,那么应该在页面初始化之后显示数据。也就是说数据绑定的操作应该写在onLoad函数里面来,之后再使用setData()函数平铺入data数组之中。
原因:赋给这个属性的false是个字符串,小程序在解析字符串的时候会将其转换成布尔值,此字符串的布尔值是true。
例子如下:
解决方法:使用数据绑定的语法,将false用双花括号括起来,这样才会解析成false。
同理,设置某个属性为true的时候,随便置入一个字符串的值,都会被解析成true。
如果js脚本外再包一层json对象,那么需要通过"{{对象名.属性名}}"进行调用
示例:
注:两个数据绑定挨在一起是可以正常解析的。
使用示例:
当然,可以通过脚本文件来动态控制标签元素的显示与隐藏。
如果服务器拿过来的数据是一个json数组,那么需要小程序的for循环进行动态的展示。
json数组示例:
以上做法会出现显示不了的问题
原因:this.setData方法是将参数平铺置入data数组中,在进行循环显示的时候会显示不全。
解决方法:给数据数组一个key并置入data中,这样data解析出来就会是一个数组。
wxml展示示例:
block标签:理解为括号,将循环体给包裹起来
注:如果指代为item,则可省略。因为微信小程序默认的元素指代就是以item命名的。
1、在app.json的页面指定的位置将欢迎页设置为第一个页面。
2、目的:点击欢迎页的按钮,跳转到之前做好的新闻展示页中(上图页面对应posts)
3、绑定事件–tap事件(tap事件详情见如下表格)
标签事件绑定的写法:事件名前面加bind
4.在脚本文件中写入函数负责页面跳转
注:填入的url可以是相对路径也可以是绝对路径,但是需要和app.json中配置的形式一致(不要加.wxml)
5.设置将跳转进来的页面不设为上一个页面的子页面(取消左上角返回)
实现两个页面之间的平行跳转。
效果:
关于这两个函数完整的参数:
当调用wx.redirectTo方法时,脚本后台会调用onUnLoad(页面被卸载之后触发)事件。
当调用wx.navigateTo方法时,脚本后台会调用onHide(页面被隐藏之后触发)事件。
什么是事件?
使用WXS函数响应事件–基础库 2.4.4 开始支持,低版本需做兼容处理。
从基础库版本2.4.4开始,支持使用WXS函数绑定事件,WXS函数接受2个参数,第一个是event,在原有的event的基础上加了event.instance对象,第二个参数是ownerInstance,和event.instance一样是一个ComponentDescriptor对象。
事件分为冒泡事件和非冒泡事件:
WXML的冒泡事件列表:
类型 | 触发条件 | 最低版本 |
---|---|---|
touchstart | 手指触摸动作开始 | |
touchmove | 手指触摸后移动 | |
touchcancel | 手指触摸动作被打断,如来电提醒,弹窗 | |
touchend | 手指触摸动作结束 | |
tap | 手指触摸后马上离开 | |
longpress | 手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发 | 1.5.0 |
longtap | 手指触摸后,超过350ms再离开(推荐使用longpress事件代替) | |
transitionend | 会在 WXSS transition 或 wx.createAnimation 动画结束后触发 | |
animationstart | 会在一个 WXSS animation 动画开始时触发 | |
animationiteration | 会在一个 WXSS animation 一次迭代结束时触发 | |
animationend | 会在一个 WXSS animation 动画完成时触发 | |
touchforcechange | 在支持 3D Touch 的 iPhone 设备,重按时会触发 | 1.9.90 |
注:除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件,如 form 的submit事件,input 的input事件,scroll-view 的scroll事件,(详见各个组件)
事件绑定的写法同组件的属性,以 key、value 的形式。
key 以bind或catch开头,然后跟上事件的类型,如bindtap、catchtouchstart。自基础库版本 1.5.0 起,在非原生组件中,bind和catch后可以紧跟一个冒号,其含义不变,如bind:tap、catch:touchstart。
value 是一个字符串,需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。
bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。
正常的流程应该是从脚本文件向服务器发一个请求去请求数据到js脚本文件,但是小程序目前没有服务器数据,将数据大量罗列到js脚本文件非常的不利于阅读。
解决方式:
将所需数据全都放到一个单独的文件中去,从脚本文件加载数据文件,从而模拟从服务器加载数据的过程。
流量限制