关于微信小程序的一些总结

mpvue？

{{}} 在vue和小程序中的区别？

　　　　01 小程序中{{}}和vue中的{{}}用法基本一致，可以显示data中的数据，可以写表达式

　　　　不一样的地方？

　　　　01 小程序的{{}}可以写在属性中

　　　　02 小程序的{{}}不能使用方法的调用

微信小程序中的 wx:key

　　　　01 wx:for 可以遍历数组中的数据

　　　　02 wx:for  一定要指定wx：key，不然会报一个警告

　　　　03 wx:key  的值有两种方式

　　　　　　　　如果遍历的值是一个对象，wx:key可以是对象中某一个唯一的属性 。 

　　　　　　　　如果数组中的值是一个字符串，wx：可以指定为*this， *this表示字符串本身。

在微信小程序中注册事件分为两种

　　　　bind+事件：　　bind注册的事件会冒泡 

　　　　catch+事件：　  catch注册的事件不会冒泡

在方法中如何放到data中的数据？

　　　　大坑：在微信小程序中的数据，数据不是双向绑定

　　　　data中的数据发生了改变，视图中的数据并没有跟着改变

　　　　直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。

方法一
  data: {
      msg:"hellow 小程序"
  },
  change(){
      this.setData({
         msg:'哈哈哈'  //要修改的参数和值
      })
  }
通过  this.setData({ })  方式进行修改，可以实现双向绑定

方法二  
data: {
      msg:"hellow 小程序"
  },
  change(){
    // 修改msg的值
      this.data.msg="你好啊"
    // 需要进行一次同步
    this.setData(this.data)
  }

如何获取input文本框的值？

　　　　01通过e.detail.value

　　　　02如果注册事件的时候，想要传递参数，给当前元素添加自定义属，通过e.currentTaget.dataset来获取值。

js中的data中发生了改变，页面中的数据并不会改变，调用setData同步才行

input框中的值发生了改变，js中的数据并不会跟着变，自己注册事件，自己修改data中的数据。微信小程序中不支持双向绑定

 微信支付

 https://blog.brain1981.com/1946.html

小程序的生命周期，app.js页面（创建一个小程序的实例，只会调用一次）

//app.js   初始化小程序 ， 做一些通用的操作
App({
// 小程序初始化的时候执行的钩子函数，全局只会触发一次
// 小程序中一次性的操作，都可以放到onLaunch中
// 比如： 登录  获取你的用户信息
    onLaunch(){ //做登录  获取用户信息等
        console.log('onLaunch','小程序初始化好了')
    },
// 只要小程序显示出来了，就会执行
    onShow(){  
        console.log('onShow','小程序显示了')
    },
// 小程序隐藏的时候触发
    onHide(){
      console.log('onHide','小程序隐藏的时候')
    },
// 小程序脚本发生错误就会触发
    onError(){
      // 可以把错误的信息收集起来，放到数据库
      console.log('onError','报错了')
    },
// 小程序哟啊打开的页面不存在的时候触发
    onPageNotFound(){

    }
})

Page页面（创建页面）

// pages/index/index.js  
// page方法用来创建一个小程序的页面
Page({
  
// 页面加载的时候会执行onLoad,一次
  onLoad () {
      console.log('onLoad','页面加载了')
  },

// 页面显示
  onShow () {//一般在这里发送ajax
      console.log('onShow','页面显示的时候就会执行')
  },

// 页面隐藏
  onHide () {
    console.log('onHide', '页面隐藏的时候就会执行')
  },
  
  // 表示页面已经渲染完了
  onReady (){//可以发送ajax
    console.log('onReady', '页面渲染完了')
    wx.setNavigationBarTitle({
      title: 'yyyy'
    })
  },
//  页面卸载时候触发
  onUnload () {

  }

})

小程序发送ajax请求

// pages/sy/sy.js
Page({
  data: {
    imgList: [],//用于存储轮播图数据
  },

  onShow: function () {
    wx.request({
      url: 'https://locally.uieee.com/slides', 
      method:'GET',
      dataType:'json',
      success:(res)=>{
        this.data.imgList=res.data
        //同步
        this.setData(this.data)
      }
  })
  }

})

微信开发工具下载地址

 　　　　https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

创建项目

1  微信公众平台 ：   https://mp.weixin.qq.com/

2 小程序秘钥  AppID  ：   左侧导航栏----开发---开发设置

云开发　　

详情----调试基础库 2.2.5

注意事项：每一个小程序项目不能超过2M

微信小程序中常见的标签  wxml

wxss

（1）单位：rpx     -----响应式像素。可以根据屏幕的宽度自适应调用图片文字容器大小

（2）引入外部的样式文件     @import './base.wxss'

关于RPX，移动端开发你使用的是什么像素？

示例： iphone6（2）

逻辑像素 * dpr = 物理像素

iphone6    375px * 2 = 750rpx

小程序，引入其它样式文件

　　　　将项目公共样式内容统一保存在一个文件中

style/common.wxss

@import  '../../style/common/wxss'

小程序开发文档

https://developers.weixin.qq.com/miniprogram/dev/framework/

微信公众平台--小程序(重点)-第三方组件库(样式库) 

云开发兼容性

小程序第三方组件库（样式库）

Vant Weapp

https://youzan.github.io/vant-weapp/#/intro

 -WeUI

 -iView Weapp

小程序 配置文件

project.config.json  项目配置文件

app.json                   项目全局配置文件

exam01.json 　　　组件配置文件

app.json    全局配置文件

如果一个选项添加 app.json 中 所有的组局都会生效

微信小程序中 js 与 网页 程序中 js有什么区别？

　　　　ECMA 基本类型： string  ；number； boolean；undefined ； null；

　　　　ECMA 对象类型：Date ; Math ; RegExp ; Array ; Function ;...

　　　　DOM/BOM 不能使用，小程序中写  document.getElemnt会报错

微信小程序循环  wx:for

    <view wx:for="{{数组名称}}" wx:key="index">
        {{item}} 当前对象
        {{index}} 当前元素下标
    </view>
    wx:for="{{循环数组名称}}"
    wx:key="index" 数组元素下标(排序规则），快速排序

wx:if

    <view wx:if="{{condition}}"></view>
    condition:表达式 true false
    true  当前元素正常显示
    false 当前元素删除

  if   elif   else

    <view wx:if="{{condition}}">111</view>                 // if

    <view wx:elif="{{condition}}">222</view>             // else if

    <view wx:else>333</view>　　　　　　　　　   // else

hidden

    <view hidden="{{condition}}">内容</view>

    condition:表达式 true false

    true隐藏  false 显示

   问题:什么时候使用if 什么时候使用hidden

   (1)如果此元素需要频繁切换使用hidden

   (2)如果此元素在运行中不大可能改变则 wx:if 较好

微信公众平台--小程序--js/事件-事件

   pc端项目   屏幕宽度 > 970px 操作:鼠标键盘

   移动端项目 屏幕宽度 < 970px 操作:手指

移动端项目：

　　　　touchstart　　当手指触碰到屏幕时发生的事件，不管几根手指

　　　　touchmove　　 当手指在屏幕上滑动的时候触发

　　　　touchend　　　当手指离开屏幕时候触发

　　　　zepto.js    相当于移动端的jquery

　　　　tap   触碰一次

　　　　longtap 长按一次 超过350ms

　　　　swipe　　滑动

　　　　swipeLeft 滑动

微信小程序事件分为两种

　　　　小程序事件分为两种　

   (1)冒泡事件:当一个组件上事件被触发后，该事件向父元素传递

   (2)非冒泡事件:当一个组件上事件被触发后，不向父元素传递

  小程序绑定事件方式

-支持事件冒泡

     <view bind事件名="事件处理函数"></view>

    -不支持事件冒泡

     <view catch事件名="事件处理函数"></view>

 例子  

支持冒泡

    <view bindtap='handle2'>父元素
        <view bindtap='handle1'>子元素</view>
    </view>

不支持冒泡

   <view catchtap='handle2'>父元素
        <view catchtap='handle1'>子元素</view>
   </view>

小程序--生命周期(组件)

 　　　　组件生命周期:一个组件从创建开始到使用最后销毁过程

  /*
   组件创建成功后触发一次
        (1)发送ajax请求
        (2)获取传递参数 
   */
  onLoad (options) {   },


/*
   组件渲染成功后触发一次
   */
  onReady () {      },


/*
   显示组件
   */
  onShow () {   },

/*
   隐藏组件
   */
  onHide () {    },

  /*
   销毁组件
   */
  onUnload () { },

微信小程序组件跳转  wx.redirectTo({}) -----不能返回，因为跳转后把原先的组件销毁了

利用 wx.redirectTo({}) 实现跳转   

比如       组件1   跳转到  组件 2。 会先卸载组件1  然后创建组件2