小程序

小程序特点

速度快 快于H5

一次开发  多端兼容

支持直接或APP 分享给好友

可离线使用

即用即走

统一每个页面为750rpx  （百分比宽高）

小程序高度不能设置百分比  用vh  100vh 就是100%

button 不能设置宽度  要用size属性控制

一般使用Ipone6 来设计开发

每增加一个页面都要有对应的目录 和四个文件 wxml css  js  json

要想可以访问  需要在app.json 的 pages 中加上

之后 我们需要页面跳转  两种  一种是通过标签

<navigator  url=""></navigator>来跳转 注意两个属性  open-type  默认可返回  使用redirect 则不可致诘返回  如果使用tabBar 则需要使用switchBar

hover-class  是按住单击后加上的样式  因为有样式覆盖的问题 所以需要在最后写这个样式  （这个属性会在单击按下的时候 加一个样式  然后会依照样式表 由上而下的执行  覆盖）

tabBar   配置（类似Q 下面跳转界面）

写在app.json中

tabBar:{

list:[{

}]}

每一个都是一个页面 

data需要写在js 的page（{

data:{}}）属性中

生命周期函数

onLoad(options)  可以接受url上的参数

onready

onHide

onUnload

 

阻止冒泡和单击事件绑定

catchTap  bindTap

在js 中完成跳转的方法

wx.nagivateTo(url:'')

wx.redicetTo()   跳转后会关闭当前页面

wx.switchTo()

自定义属性格式

data- ab-cd   =>  dataset里面会叫 abCd

发送请求 wx.request({

url：’‘’，

method:'GET'

data:{x:1,y:2},

header:

success：function(){}

fail:funtion(){}

complete(){}

}

)

小程序的请求都会有refer令牌表明他是小程序

设置菜单栏状态

wx。showNavigateBarLoading（）

wx.hideNaigationBarLoading()

wx.setNavigationBarTitle()

 

自定义组件

1  一样需要四个文件  但是 js 与json 不一样

js 中 是Component({

 properties:{

  aaaa:String

})

json中要表明 是组件

"component":true

引入  注意这里要到js级的目录

在需要引入的父组件中 的json中引入

 "usingComponents": {"our":"/components/image/image"}

注意名字不能是驼峰式命名 可以是-

使用的时候传参 就和vue差不多

  <our jieshou="{{motto}}"></our>

小程序 没有现成的 双向绑定  需要自己实现

bindInput  可以 输入的时候实时触发函数 

• wxml
  <input type="text" data-name="worker" value="{{worker}}" bindinput="inputChange">
• js

 

// input框中输入的值，立即保存到worker变量中  视图=>data的更新
// 变量worker变更，input框中的数据也就会立即变量   data=>视图 （小程序原本就存在的功能，这一部分不需要刻意实现）
inputChange(event) {
  let dataset_name = event.currentTarget.dataset.name   // worker字符串
  let view_name = event.detail.value
  this.setData({
    [dataset_name]: view_name    // worker: input框输入的值
  })
}

需要注意的是 要想视图跟着 数据变化而变化  需要setData 而不是简单的直接赋值