微信小程序学习笔记 – Ivan's Blog

Ivan's Blog

微信小程序学习笔记

6月
28

 

  • 小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生APP体验的服务。
  • rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px =750物理像素,1rpx = 0.5px= 1物理像素。
  • wxss有一个坑:无法读取本地资源,比如背景图片用本地就会报错哦。把本地图片弄成网络图片的几种方式: 上传到个人网站;QQ空间相册等等也是可以的。
  • 代码架构目录:js、app.json、app.wxss,这三个中前两个是必看的,前两个相当于目录,就好比你读一本书,都要先看一下目录,所以以后看别人项目的时候,首先先看app.js和aapp.js:页面数据的存储,网络请求的加载都是在这里。
  • js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的API。里面包含的几个方法ApponLaunch、getUserInfo、getUserInfo ,onLaunch是小程序启动时执行的方法。
  • json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。注意该文件不可添加任何注释。包含两部分pages和window,pages就是整个小程序包含的页面,可以根据路径查找到对应的页面,window就是设置一些窗口样式,依次是配置小程序的窗口 背景字体样式,配置导航条背景样式,配置默认标题及颜色。

window

用于设置小程序的状态栏、导航条、标题、窗口背景色。

属性 类型 默认值 描述
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色,如”#000000″
navigationBarTextStyle String white 导航栏标题颜色,仅支持 black/white
navigationBarTitleText String   导航栏标题文字内容
backgroundColor HexColor #ffffff 窗口的背景色
backgroundTextStyle String dark 下拉背景字体、loading 图的样式,仅支持 dark/light
enablePullDownRefresh Boolean false 是否开启下拉刷新,详见页面相关事件处理函数
onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离,单位为px

 

  • wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss中声明的样式规则。
  • app.wxml 页面的效果都在这里面,就是展现给用户的界面。
  • 以这个开头的都是系统封装好的方法,我们都可以直接调用,输入wx.,系统会自动提示出自带的方法。
  • unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。globalData全局变量数据。
  • 所有的数据绑定与动态修改只能通过维护 Page里面的data{}以及调用 setData()方法进行。
  • App()必须在js中注册,且不能注册多个。不要在定义于App()内的函数中调用getApp(),使用this就可以拿到app实例。不要在onLaunch的时候调用getCurrentPage(),此时page还没有生成。
  • Page()函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、时间处理函数等。

object 参数说明:

属性 类型 描述
data Object 页面的初始数据
onLoad Function 生命周期函数–监听页面加载
onReady Function 生命周期函数–监听页面初次渲染完成
onShow Function 生命周期函数–监听页面显示
onHide Function 生命周期函数–监听页面隐藏
onUnload Function 生命周期函数–监听页面卸载
onPullDownRefresh Function 页面相关事件处理函数–监听用户下拉动作
onReachBottom Function 页面上拉触底事件的处理函数
onShareAppMessage Function 用户点击右上角转发
onPageScroll Function 页面滚动触发事件的处理函数
其他 Any 开发者可以添加任意的函数或数据到 object 参数中,在页面的函数中用 this 可以访问

 

 

 

 

6/21

  • display属性
    – none:此元素不会被显示
    – block:两个元素自动换行
    – inline:两个元素靠在一起
    – inherit:继承父类
    – flex:多栏多列
    2. flex-wrap:
    – nowrap item溢出不换行
    – wrap 超出的item跳到下一行
    3. justify-content属性
    – flex-start:左对齐
    – flex-end:右对齐
    – center:居中
    – space-between :item中间留出等间距
    – space-around:环绕item流程等间距
    4. align-items item 边界线对齐方式
    – flex-start | flex-end | center | baseline | stretch
    5. border-bottom 边界线
    – 举个栗子 1px solid #ccc;
    6. align-items item 边界线对齐方式
    – flex-start | flex-end | center | baseline | stretch
    7. overflow-x 内容超过边框处理方式
    – visible 显示超出的内容
    – hidden 隐藏超出的内容
    – auto 自动加入滚动条
  • 路由方式

对于路由的触发方式以及页面生命周期函数如下:

路由方式 触发时机 路由前页面 路由后页面
初始化 小程序打开的第一个页面   onLoad, onSHow
打开新页面 调用 API wx.navigateTo 或使用组件 <navigator open-type=”navigateTo”/> onHide onLoad, onShow
页面重定向 调用 API wx.redirectTo 或使用组件 <navigator open-type=”redirectTo”/> onUnload onLoad, onShow
页面返回 调用 API wx.navigateBack 或使用组件<navigator open-type=”navigateBack”>或用户按左上角返回按钮 onUnload onShow
Tab 切换 调用 API wx.switchTab 或使用组件 <navigator open-type=”switchTab”/>或用户切换 Tab   各种情况请参考下表
重启动 调用 API wx.reLaunch或使用组件 <navigator open-type=”reLaunch”/> onUnload onLoad, onShow

Tips:

navigateTo,redirectTo只能打开非 tabBar 页面。

switchTab 只能打开 tabBar 页面。

reLaunch 可以打开任意页面。

页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。

调用页面路由带的参数可以在目标页面的onLoad中获取。

  • navigator

页面链接。

属性名 类型 默认值 说明
url String   应用内的跳转链接
open-type String navigate 跳转方式
delta Number   当 open-type 为 ‘navigateBack’ 时有效,表示回退的层数
hover-class String navigator-hover 指定点击时的样式类,当hover-class=”none”时,没有点击态效果
hover-start-time Number 50 按住后多久出现点击态,单位毫秒
hover-stay-time Number 600 手指松开后点击态保留时间,单位毫秒

open-type 有效值:

说明 最低版本
navigate 对应wx.navigateTo的功能  
redirect 对应wx.redirectTo的功能  
switchTab 对应wx.switchTab的功能  
reLaunch 对应wx.reLaunch的功能 1.1.0
navigateBack 对应wx.navigateBack的功能 1.1.0

 

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注