小程序原生语法

1.数据绑定

{{}}
属性绑定也用{{}}

data:{
count:0
num:1
}

2.事件绑定

事件类型: bindtap(相当于click) bindinput bindchange
事件对象: event
数据修改:
this.setData({
count:1
})
事件传参: 事件传参不能把参数写在方法中,要写在自定义属性中data-xxx
获取参数传数: e.target.dataset.xxx

input表单: 小程序中数据不是双向绑定的, 视图层的改变,模型属没有变化
获取表单中的数据 e.detail.value
要实现模型层数据同步: this.setData({
val:e.detail.value
})

3.数据分支

vue: 语法 v-if … v-else-if … v-else
template
v-show与v-if的区别

小程序: 语法: wx:if … wx:elif … wx:else

      block: 多标签的包裹  block在页面不渲染
      hidden与wx:if的区别

v-show=“true” 显示
hidden={{true}} 隐藏

4.数据循环

(a) wx:for="{{数组}}" 默认下标index 默认值 item

(b) 自定义下标或值 wx:for-index wx:for-item

© 也要指定Key wx:key=“唯一值”

5.小程序中的样式

小程序中的样式 选择器与属性 大部分是通用的
小程序中关注点:
(a) 单位 rpx 屏幕宽度分类750份
(b) 可以导入wxss文件@import 类似于Less

6.全局配置: app.js

pages:
window:{
“navigationBarBackgroundColor”: “#2b4b6b”,
“navigationBarTitleText”: “小程序”,
“navigationBarTextStyle”:“white”,

"enablePullDownRefresh": true,
"backgroundColor":"#333",
"backgroundTextStyle":"light"

"onReachBottomDistance": 50

},
tabBar:{
list:[
{},
{}
]
}

7.局部配置

全局window中的属性在每一个页面中都会生效,在页面的配置文件中也可以对window对象中的属性再次配置
以页面配置的属性为准.
“navigationBarBackgroundColor”: “#2b4b6b”,
“navigationBarTitleText”: “小程序”,
“navigationBarTextStyle”:“white”,

"enablePullDownRefresh": true,
"backgroundColor":"#333",
"backgroundTextStyle":"light"

"onReachBottomDistance": 50

8.小程序中如何发送ajax

(a) 服务器的协议必须是https:// ( 由后端,运维设置 )
(b) 服务器的地址添加到小程序的后台
© 小程序中没有跨域

语法: wx.request({
url:
method:
data:{

  },
  success(res) {
      console.log(res)
  }

})

1. 导航

a.声明式导航 navigator(相当于用标签a)
语法:

  tabBar页面: open-type="switchTab"

  非tabbar页面:   
    open-type="navigate"  原页面不销毁   
    open-type="redirect"  原页面销毁

  回退:
    open-type="navigateBack"
    <navigator  open-type="navigateBack"></navigator>

b.编程式导航 js代码实现跳转
tabBar页面: wx.switchTab({url:地址})

 非tabbar页面:  wx.navigateTo({url:地址})  原页面不销毁
 非tabbar页面:  wx.redirectTo({url:地址})  原页面销毁
 
 回退: wx.navigateBack({{delta:层数}})

c.传参
navigator url="/pages/xxx/xxx?键=值&键=值"
wx.navigateTo({url:"/pages/xxx/xxx?键=值&键=值"})

 接收参数:  onLoad(option){}   option就是接收的参数对象

2. 下拉刷新

a.不建议在全局开启下拉刷新,一般在页面开启下拉刷新
“enablePullDownRefresh”:true

b.修改下拉刷新的背景样式
“backgroundColor”:16进制颜色值
“backgroundTextStyle”: “dark|light” 小圆点loading值

c.在页面.js中有一个事件监听下拉刷新
onPullDownRefresh(){
一般业务逻辑是请求最新的数据
wx.request({
url:
data:
method:
success(){},
error(){},
complete(){
wx.stopPullDownRefresh()
}
})
}

d.关闭下拉刷新
wx.stopPullDownRefresh()

3. 上拉加载

a.配置上拉加载的距离 一般不修改
onReachBottomDistance:50(默认)

b.当内容大于视口的高度时,下滑到底部小于BottomDistance时,onReachBottom函数才会执行
onReachBottom() {
//加载更多数据
}

4. 生命周期

分类: 应用生命周期 页面生命周期

a.应用生命周期钩子函数
App({
onLaunch(){
只会执行一次
},
onShow(){
项目第一次启动或从后台切前台
},
onHide(){
项目从前台切换到后台
}
})
b.页面生命周期钩子函数
Page({
** onLoad(){}, created
onShow(){},
** onReady(){}, mounted
onHide(){},
onUnload(){}
})

5. wxs (weixin script)

能做什么? 可以对wxml中的数据过行加工处理,相当于 “过滤器”

语法:
内嵌式:

…业务逻辑
导出对象
module.export ={

     }
  </wxs>

 外链式:
  1.创建一个.wxs文件,它就是一个模块,也要向外导出一个对象
  2.引入.wxs文件  <wxs module="模块名" src="相对路径的地址"></wxs>

自定义组件

1. 如何创建组件

2. 引用组件

a.页面引用组件

b.全局引用组件

3. 页面与组件的区别

页面中的事件方法与data是同级的
组件中的方法是写在Component() 中的methods:{}

4. 组件的样式

组件中的样式与页面中的样式 默认是隔离的.
注意: 组件与页面中的样式 要用class选择器, id,标签,属性选择器不会隔离

修改组件与页面的默认隔离性:
组件.js
options:{
styleIsolation:“isolate|apply-shared|shared”
}
组件.json
“styleIsolation”:“isolate|apply-shared|shared”

isolate: 隔离
apply-shared: 页面可以影响组件,但组件不能影响页面
shared: 页面与组件可以相互影响

5. 组件中的数据,方法,属性

数据:data:{ count:0 } 存组件中的私有数据

方法:methods:{ }
注意点: 不是绑定事件的方法建议用_开头

属性: properties:{ } 接收组件传值

this.data === this.properties

6.数据监听

observers

7.纯数据字段

不需要在 结构上 显示的数据可以定义为纯数据字段, 好处速度快

options:{
   pureDataPattern: /^_/
}

data:{
   _a:0
}

8. 组件的生命周期

lifetimes:{
created(){}
attached(){}
detached(){}
}

组件所在页面的生命周期
pageLifetimes:{
show() {}
hide() {}
resize() {}
}

9. 插槽

10.组件传值

父向子: 自定义属性

子向父: 自定义事件 this.triggerEvent(“自定义事件名”)

页面中中直接操作子组件中属性与方法:
const component = this.selectComponent(“组件标识:id或claas选择器”)

component.setData()
component.自定义的方法()

11.behaviors

相当于vue中的混入mixin 组件中引入了behaviors可以共享属性,数据,方法