微信小程序基础知识点（一）

1. 小程序简介

首先来说说到底什么是小程序，按照微信之父张小龙的定义，小程序是一种不需要下载安装即可使用的应用，小程序实现了应用"触手可及"的梦想，用户扫一扫或搜一下即可打开应用。同时，体现了"用完即走"的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无须安装卸载。
 

2.小程序优点

使用方便，开发简单，跨平台运行，快速分布与迭代。

3.小程序构成

一、文件构成

js文件

业务逻辑，实现交互功能。

json文件

配置文件

wxml文件

类似于html文件

wxss文件

类似于css文件

二、项目结构

pages 项目的根目录

        index 页面文件夹

        index 页面文件夹，每个文件夹表示一个页面，页面由四个文件构成，文件名必须相同。默认加载的是index页面

                index.js  页面逻辑文件

                index.json 页面配置文件

                index.wxml  页面结构文件

                index.wxss  页面样式文件

utils  项目的工具

util.js

app.js 全局逻辑文件

app.json  全局配置文件

app.wxss  全局样式文件

4.练习项目中知识点总结

一、钩子函数及修改data值

Page({
  //页面的初始数据，称为数据仓库data
  data:{
    msg:"welcome"
  },
  //生命周期回调-监听页面加载 注意：1.该函数只执行一次 2.已加载的页面会被缓存，不会重复加载，提高性能
  onLoad:function(query){  //参数query中包含了跳转到当前页面时，所携带的参数信息
    console.log('about页面加载....',query);
  },
  //生命周期回调-监听页面初次渲染完成 注意：该函数只执行一次
  onReady:function(){
    console.log('about页面初次渲染完成....');
  },
  //生命周期回调-监听页面显示 注意：1.该函数可以多次执行 2.onShow第一次执行时机早于onReady
  onShow:function(){
    console.log('about页面显示...');
  },
  //生命周期回调-监听页面隐藏 注意：该函数可以多次执行
  onHide:function(){
    console.log('about页面隐藏...');
  },
  //生命周期回调-监听页面卸载
  onunload:function(){
    console.log('about页面卸载...');
  },
  //监听用户下拉刷新事件
  onPullDownRefresh:function(){
    console.log('about页面执行了下拉刷新....');
  },
  //监听用户上拉触底事件,有滚动条
  onReachBottom:function(){
    console.log('about页面执行了上拉加载....');
  },
  //监听用户点击右上角转发
  onShareAppMessage:function(options){
    console.log('about页面执行了分享....',options);
    return{
      title:'转发标题',
      path:'/pages/about/about',
      imageUrl:'../../images/baidu.png'
    };
  },
  //监听tab页的tab点击操作  tab页：tab栏中list对应的页面
  onTabItemTap:function(item){
    console.log('about页面的tab被点击了....',item);
    //this代表当前页面实例
    console.log(this);
    //获取自定义数据和方法
    console.log(this.user.name);
    this.show();
    //获取数据仓库data中的数据
    console.log(this.data.msg);
    //修改数据仓库data中的数据,这种方法无法改变页面的状态，还会造成数据不一致
    this.data.msg='欢迎';
    //修改数据仓库data中的数据，并同步更新页面中绑定的值，即改变页面的状态
    this.setData({
      //如果已存在，则修改；如果不存在，新增
      msg:'欢迎',
      info:'欢迎学习微信小程序'
    });
  },

  //其他，自定义变量和函数
  user:{
    name:'Jack',
    age:18
  },

  show(){
    console.log('执行了show方法....');
  }
})
————————————————
版权声明：本文为CSDN博主「小王@Note」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/zdfsb/article/details/107735347

2.事件

bind:tap="事件函数名称"  

change 输入改变

focus 聚焦

blur 失去焦点

confirm 确认

clear 清楚内容

3.block

是一个包装块，也就是代码块，里面可以包装一个专门的代码模块或者模板，但是它不会被显示到页面上，只会将包装的内容显示到页面上。