当前位置:   article > 正文

微信小程序基础心得(一)_微信小程序心得

微信小程序心得

微信小程序基础(一)

安装微信开发者工具

安装地址

下载以后进行安装

打开微信开发者工具

打开工具以后,创建项目(选择小程序项目创建),因为是开发环境,我们没有appid,所以选择体验版,这个时候就不用输入appid

程序的目录结构

  1. app.js

    在这个程序里面,它有两个部分

    • onLounch程序在启动的时候会自己执行,它只会执行一次,就是程序执行的时候
    • globalData这个代表全局数据
  2. app.json

    这个文件是当前的项目的配置文件,相当于我们的package.json文件在这个文件里面,几个地方需要特别注意

    • page:这个选项,用来声明我们当前这个程序有多少个页面
    • window:这个属项用来控制当前小程序的窗体信息,如果小程序的主体颜色,小程序的标题等信息
  3. app.wxss

    这个文件相当于全局css样式,在这里写了css样式以后,任何页面都可以直接使用里面的样式

  4. pages目录

    小程序里面,所有的页面都在这个里面,相当于vue程序里面的views目录或pages目录

    注意:里面的每个页面都又是一个单独的文件夹(后面详细介绍)

  5. utils目录

    与我们平常的utils是一样的类型,用来存放一些封装的工具与方法

小程序的页面结构

在vue的程序里面,我们每个vue文件都有三个部分,<template>,<script>,<style>

而我们的小程序又是借鉴了vue的编程思想,所以它也有三个文件

vue类型小程序类型网页
wxml html

小程序本质上面,是把vue里面的三个部分单独的拆分出来在了一个文件,所对应的关系如上在所示

微信小程序里面,每一个页面下面除了上在的三个文件以后,还有一个配置文件.json的配置文件…

微信小程序的页面配置

  1. 新建页面的步骤

    因为我们所有的页面都放在pages的目录下面,所以我们就从这里开始

    • 先新建一个空白的目录,取一个名子如list
    • 在新建的这个目录下面点击鼠标右键,选择新建Page,输入名称,这个时候,开发工具会自动帮我们创建四个文件list.wxml,list.wxss,list.js,list.json
    • 上面创建的这四个文件就是之前给大家提的页面的四种文件类型
    • 微信小程序的wxml

    wxml是微信小程序页面当中布局的地方,里面支持微信的标签库,它不支持普通的html标签库,其中常用的以下几种,我分别做对比

    小程序标签网页标签说明
    <view> <div>块级元素的代表
    <text><span>,<label>行内元素的代表
    <image><img>行内块级元素
    <input><input>表单类型元素`
    <input password="true"><input type='password'>密码类型
    <textarea><textarea>多行文本
    <picker><select>下拉选项
    <radio>, <checkbox>type='checkbox'单选,多选

    总结一下:微信小程序里面,wxml可以把它看成是html,但是它不是纯粹的HTML,它相当于Vue当中的组件<view就相当于一个view的组件,它所有的标签都是一个组件,都是基于virtual-DOM开发的

    因为是组件,所以它的标签不可以出现驼峰命名

  2. 微信小程序的样式文件wxss

    在小程序里面,也是通过css来控制页在的样式的,但是它的文件叫wxss不叫css

    微信小程序的样式文件分为两部分

    • 全局样式文件 app.wxss

    • 单一页面样式文件:某一个页面文件夹下面的.wxss文件,如list.wxss这个文件的样式只作用于list.wxml这个页面

      单一个的页面样式,相当于vue的style加不了scoped闭合

    • wxss里面采用flex弹性布局为基本–>其次采用position—>最后采用float布局

    • 微信小程序因为是运行在微信里面,所以它有注意样式的兼容性,但是我们不用考虑,因为在微信小程序的配置项里面有一个配置项postcss,我们只需要把它设置打开

    • 在微信的样式里面,如果要使用像素,推荐使用rpx样式而不使用px

      rpx是可变化的px,它会根据你的访问设备的像素调整大小,它有一个转换公式

      1px=1.8~2.2rpx

    • wxss里面,支持的选择器也就是我们的css选择器,少用id多用class

  3. 微信小程序的script文件javascript(wxs)

    在小程序里面,我们的所有事件,方法,生命周期等等代码都是写在.js的文件里面

    在这个页面的下面,都会有一个js文件,这个JS文件会调用Page()这个方法,这个方法里面接收一个对象参数{}

    在这个参数里面,有两个东西不可忽略

    • data属性

    这个属性主要用于托管当前wxml页面上面的数据,相当于vue里面的data

    • onLoad属性

      onLoad相当于页面加载的时候 ,只要页面被打开,都会被加载一次

配置微信小程序的启动页面

微信小程序在启动的一瞬间,会加载app.js这个文件,然后去执行onLaunch这个方法,然后再开始加载页面

问题:

  1. 如果让小程序知道那一个是首屏的页面?
  2. onLaunch这个方法到底干了些什么事情?

首先,微信小程序是通过app.json这个配置项来决定你小程序的配置的,并且在app.json里面,有两个非常重要的东西,第一个:pages,第二个window,而与页面相关的配置就在这个pages

我们再次打开app.json这个文件,然后会在app.json的配置项pages里面,找到我们刚刚创建的一个页面list,在这个配置项里面,排在第一位的就是启动以后的默认页面

微信小程序页面数据渲染

微信小程序它也是一套MVVM的框架,它也是基于数据绑定来进行的,它不可以进行DOM操作,也就是说它没有document这一个对象。也没有alert,confirm以及prompt这个方法,它页面上面所有的数据都是通过当前目录的JS下面的data来进行操作的,我们改变data里面的数据以后,它会自动的更新到页面上去

  • 双向数据绑定

    1. 普通渲染

      小程序里面,绑定数据我们使用双花括号{{}}

    2. 循环列表

      我们使用wx:for来循环绑定,它绑定的是一个数组,循环出来的每一项默认是item

      如果要改变这个item,需要设置 wx:for-item="a",这个时候,循环出来的每一次就都是a了

      循环的时候它会产生一个索引值,这个索引值是index,如果要改变这个index的值,那么,我们需要设置属性wx:for-index,如 wx:for-index='idx'

      <view wx:for="{{userList}}" wx:for-item="a" wx:for-index='idx' wx:key="idx">{{a}}-{{idx}}</view>
      
      • 1

      说明:如果没有加wx:key这个时候,在控制台会打印出一个警告信息

    3. 条件渲染

      微信在做界面渲染的时候,它可以根据某一些条件来渲染我们的页面,使用wx-if

      <view wx-if="{{1<2}}">
          这是条件渲染
      </view>
      
      • 1
      • 2
      • 3

      在vue里面,我们条件渲染有v-ifv-show两种方式,但是在微信小程序里面,它只有一种条件渲染就是wx-if

    注意事项:它与vue相比,vue在循环的时候需要使用一个key,同理,在小程序里面,它也需要一个wx:key

    同时,在渲染的过程当中,wx:for是小程序的循环,而vue则是 v-for="(item,index) in list"


  • 单向数据绑定

    【暂时不做讲解】

微信小程序当中的事件

在微信小程序里面,它的事件也做了一系列的封装,现在列出如下

  1. tap触摸事件

    这个事件相当于我们之前的click事件

    在事件进行绑定的时候,我们使用bind这一个方法来进行,例如绑定它的触摸事件是bindtap

    注意事项:它在进行事件绑定的时候,后面只需方法名,不要加括号。如下:

    <button bindtap='test'>按钮</button>
    
    • 1

    上面的代码里在,它中是写了test页不是test(),这是一定要注意

    我们现在定义了一个方法test,现在这个方法写在什么地方呢

    在当前的页面的js的文件下面,直接定义一个方法 test就可以了

    wxml代码

    <button bindtap='test' data-uid='h17090001'>按钮</button>
    
    • 1

    js代码

    // pages/aa/aa.js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        userName:"杨标",
        nickName:"二当家的",
        userList:["张三","李四","王五"]
      },
    
      /**
       * 生命周期函数--监听页面加载
       * 相当于vue里面的created()
       */
      onLoad: function (options) {
        console.log("当前而被加载了");
      },
    
      /**
       * 这是es5的写法
       */
      // test:function(){
    
      // }
    
      /**
       * 如果是es6也是可以了,只需要在project.config.json这个配置文件下面,打开es6的设置即可
       */
      test(event){
          //这个时候,我们的data-开头的自定义属性,就都会被封装到一个dataset的属性下面
        console.log(event.currentTarget.dataset.uid);
        console.log("你点击我了");
      }
    })
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36

    说明:上面的方法test是被bindtap绑定的,这个时候,因为在绑定的时候不能够加(),所以这个方法是不接受参数,但是系统会自动的注入一个event事件参数,我们可以根据这个event参数来做一些事情,例如传参等操作

  2. bindlongtap长按事件

    这个事件是以前的一个长按事件,我们可以在这个事件上面做一些菜单的操作(例如长按某一个选项菜单弹出菜单),现在这个事件被微信小程序的另一个事件替代掉了

    "longtap" event is deprecated. Please use "longpress" event instead.

    上面的提示告诉我们,我们的longtap事件已经过时,它希望我们使用longpress这个事件去替代

  3. bindinput表单输入绑定事件

    我们可以通过这个事件来获取当前这个元素所输入的值****

    为什么要这么做呢?

    因为我们的微信小程序在做数据绑定的时候,没有像vue那样的v-model的表单数据绑定


    现在,我们写个例子,通过bindinput来做表单的数据绑定

    wxml代码

    <view>
      <input placeholder="请输入用户名" class='txt' bindinput='bindInputData' id='uname'></input>
      <input placeholder='请输入密码' class='txt' bindinput='bindInputData' id='pwd'></input>
      <button bindtap='getData'>确定</button>
    </view>
    
    • 1
    • 2
    • 3
    • 4
    • 5

    JS代码

    Page({
      /**
       * 页面的初始数据
       */
      data: {
        uname:"",
        pwd:""
      },
      /**
       * 这一个方法就是通用的绑定input表单的方法
       */
      bindInputData(event){
        var id=event.currentTarget.id;
        this.data[id]=event.detail.value;
      },
      getData(){
        console.log(this.data);
      }
    })
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号