微信小程序开发基础( 采用伪代码)

---

一 小程序中的标签

1.1 view

这个就相当于html的div标签

1.2 text

这个就相当于html的span的标签

二 文本插值

也是采用{{}} 无论在哪里调动data中的值都需要使用{{}}包括在html标签中使用数据也要使用{{}} 

三 小程序中的单位

小程序中的单位rpx他会自动适配网页
他和px的换算大概是 px是rpx的2倍

四 小程序中的事件绑定

小程序中的事件绑定使用bind:事件名='函数名'
使用catch绑定事件可以阻止冒泡操作

4.1小程序中在js中获取data中的数据

使用this.data.数据名
其中this.data是用来获取页面data对象的
this.setData是用来更新界面的
如果要修改data中的数据要使用
this.setData({
     数据名:'修改'
})

4.2 小程序中的数据绑定

<input  type='text'    value='{{val}}' @change='changeVal' >
{
  data:{
   val:'我是val数据'
},
changeVal(v){
    //V是接收到的数据 是一个对象的形式
   console.log(v)//会的到一个对象
   //v.detail.value会得到value修改之后的数据  
   //之后我们将v.detail.value修改到data中的数据即可
 this.setData({
     val:v.detail.value
})
}
}

五 小程序中的指令

5.1 wx:for

它可以用来遍历数据用 
data{
   arr:['lala'.'bb','cc']  
}

<view  wx:for='{{arr}}'> {{item}}</view> //它里面会自动解析item还有index 
他的结果是 
'lala'
'bb'
'cc'

5.2 wx:if和hidden

这两个都是控制显示和隐藏的
data:{
   isshow:true  
}
<view wx:if='{{isshsow}}' > 我是显示的盒子 </view>//显示
<view wx:if='{{!isshow}}'>  我是隐藏的盒子 </view>//这个是隐藏的
<view hidden='{{!isshow}}' > 我是显示的盒子 </view> //显示
<view  hidden='{{isshow}}'>我是隐藏的盒子</view> //隐藏的

六 小程序中的tabbar

 在app.json 中设置 tabbar数组 里面是一个一个对象
tabbar:[
   {
     "text":""tabbar标题
     "iconPath":""默认图片显示,
     "selectIconPath":""被选中时候的图片显示,
     "pagePath":"" 跳转路径
}
]

七 小程序中的生命周期

onLoad 监听页面加载类似于created这里面可以请求接口但是这个时期data中的数据还没有初始化
onReady 监听页面初次渲染完成类似于mounted
onShow 监听页面显示 
onHide  监听页面隐藏
onUnload 监听页面卸载 

八 小程序的跳转页面

8.1 标签跳转办法

<navigator url=''  open-type=''><navigator>使用这个标签 url 是控制跳转路径的 
open-type 是控制跳转方式 跳转方式 有 
navigate 就和vue中的push的差不多但是这里的这个会缓存网页 显示和隐藏网页可以返回上一页
redirect 这个不能够返回上一页 
reLaunch  不能够返回上衣页面  网页
switchTab  用于切换tabbar tabbar才会用 不设置这个方式tabbar的网页是不会跳转的
navigateBack  返回上一页和navigate搭配使用
 

8.2 api的方法进行跳转

<button  bindtap='事件名'></button>
事件名(){
//  navigateTo redirectTo  relaunchTo switchTabTo navigateBackTO
wx.navigateTo({
   url:'地址'
})
} 

8.3 传值

直接写在地址中 比如
<button  bindtap='事件名'></button>
事件名(){
//  navigateTo redirectTo  relaunchTo switchTabTo navigateBackTO
wx.navigateTo({
   url:'地址?id=11&name=里斯'
})
} 
在生命周期中的 onloads中接取 
onLoad(options) {
    console.log("onload")//这里面是传过来的对象
  },

九 子组件的创建

在component文件夹下创建一个新的文件夹里面在点击右键创建component就可以了
之后在需要的组件的文件夹下的json文件夹中引入
"usingComponents": {
   组件名 "Child":"/components/Child/Child"  路径
  }

十 组件传值

10.1 父传子

在父元素的data中创建一个值 
data{
   msg:'我是一个值'  
}
在父元素引入子组件的位置 
<child 自定义名字='{{要传入的数据}}'></child>
在组件的js文件中的
properties: {
   标签中自定义的名字 msg:{
      type:String,  //类型
      value:""      //默认值
    },
  },

10.2 子传父

需要给子元素里面绑定一个按钮让他去告知父元素传值了
<button bindtap='函数名'></button>
注意子组件中的函数要写在method中要不，会出现报错
函数名(){
   this.triggerEvent('事件名'，传的值)
}
在父组件中的子组件的前置标签中 <child bind:'自定义事件名'='自定义函数名'></child>
自定义函数名(v){
   console.log(v)
   这个传的参数就在这个v里面这个v里面是一个对象
}

10.3 事件传参

<button bind:tap='函数名'  data-'自定义名'='值'></button>
函数名(v){
   consolo.log(v) //这个传的值就在这个v里面
}

10.4 路由传参

就是在navigateTo等进行跳转的时候 
在url中传参的  
接收的话 就在生命周期的onload中接收  

十一 小程序中的图片标签

 image 
  小程序里面的图片 自带大小  320px*240px
  mode  设置图片显示形式  缩放  裁剪
    scaleToFill  给多大就是多大  默认
    widthFix    给定宽度 高度自适应
  	show-menu-by-longpress  长按显示菜单 保存 收藏  识别二维码