zoukankan      html  css  js  c++  java
  • 小程序入门(一)

    (1)

    小程序没有DOM对象,一切基于组件化

    小程序的四个重要的文件

    a.     *.js

    b.     *.wxml ---> view结构 ----> html

    c.      *.wxss ---> view样式 -----> css

    d.     *. json ----> view 数据 -----> json文件

    (2)储备知识

    a. 理解事件机制

    b. 理解组件化

    c. 理解数据绑定

    d. Flex布局

    e.     移动端适配方案

    Iphon6: 1rpx = 1物理像素 = 0.5px

    微信官方提供的换算方式:

    1. 以iPhone6的物理像素个数为标准: 750;

    2. 1rpx = 目标设备宽度 / 750 * px;

    3. 注意此时底层已经做了viewport适配的处理,即实现了理想视口。

     

    (3)数据绑定 & 事件

    //数据绑定

    (1)

    Page({

     

      /**

       * 页面的初始数据

       */

      data: {

        msg: '开启小程序之旅'

      },

    })

    this.setData({

          msg: '我是修改之后的数据'

    })

    //生命周期

    Page({

     

      /**

       * 页面的初始数据

       */

      data: {

        msg: '开启小程序之旅'

      },

     

      /**

       * 生命周期函数--监听页面加载

       */

      onLoad: function (options) {

       

      },

     

      /**

       * 生命周期函数--监听页面初次渲染完成

       */

      onReady: function () {

       

      },

     

      /**

       * 生命周期函数--监听页面显示

       */

      onShow: function () {

       

      },

     

      /**

       * 生命周期函数--监听页面隐藏

       */

      onHide: function () {

       

      },

     

      /**

       * 生命周期函数--监听页面卸载

       */

      onUnload: function () {

       

      },

     

      /**

       * 页面相关事件处理函数--监听用户下拉动作

       */

      onPullDownRefresh: function () {

       

      },

     

      /**

       * 页面上拉触底事件的处理函数

       */

      onReachBottom: function () {

       

      },

     

      /**

       * 用户点击右上角分享

       */

      onShareAppMessage: function () {

       

      }

    })

     

    (2)事件

    (1) 冒泡事件

    (a) 定义:冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。

    (b) 冒泡事件列表:

    https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html

    (2) 非冒泡事件

    (a) 定义:当一个组件上的事件被触发后,该事件不会向父节点传递。

    (b) 非冒泡事件:表单事件和自定义事件通常是非冒泡事件

    https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html

     

    bind绑定:事件绑定不会阻止冒泡事件向上冒泡

    catch 绑定: 事件绑定可以阻止冒泡事件向上冒泡

     

    (3)用户授权,获取用户的信息

       wx.getUserInfo({ //微信小程序提供的API

          //withCredentials: true,

          success: (res) => {

            console.log(res);

            let user = res.userInfo;

            this.setData({

              user

            })

          }

    })  

     

    (4)bind绑定:事件绑定不会阻止冒泡事件向上冒泡

    catch 绑定: 事件绑定可以阻止冒泡事件向上冒泡

     

    (5)跳转页面

       wx.navigateTo({ //可以回退

          url: '/pages/list/list',

          success(){

            console.log('跳转成功');

          }

        })    

     wx.redirectTo({ //不能回退

          url: '/pages/list/list',

          success(){

            console.log('跳转成功');

          }

        })    

     

  • 相关阅读:
    运营商公网
    任务管理器 的 服务与进程
    QQ通信原理及QQ是怎么穿透内网进行通信的?
    windows Telnet 客户端常用命令介绍
    redis优化
    shell反射
    USB安装centos6系统(centos7需要换软件)
    rocketmq双主模式
    golang数据类型与转换
    golang介绍
  • 原文地址:https://www.cnblogs.com/love-life-insist/p/10057097.html
Copyright © 2011-2022 走看看