小程序的学习

菜鸟000
192 阅读3分钟

目录

什么是小程序

  • 触手可及
  • 用完即走
  • 无需安装卸载

小程序与应用程序区别

- 无需安装
- 不占内存
- 易于传播

小程序能做什么

小程序开发准备工作

微信小程序开发框架

  • js 、json、wxml、wxss

wxml开发框架--属性

  • id,class,style,hidden,data-, bind / catch*

wxml开发框架--列表渲染

<view wx:for="{{items}}" wx:for-item="item" wx:key="index"></view>

wxml开发框架--条件渲染

  • hidden 都会渲染，只是初始化渲染小消耗
  • wx:if dom销毁并重新渲染，有更高的切换消耗
<view wx:if="{{condition===1}}">公交</view>
<view wx:elif="{{condition===2}}">地铁</view>
<view wx:else>步行</view>

Page({
  data: {
    condition:Math.floor(Math.random()*3+1)
  }
})

wxml开发框架--模板引用

  • template 模板有自己的作用域，通过自己的data属性传入
<import src="../../component/toast/toast.wxml"/>
<template is="toast" data="{{...toast}}"/>
  • import 模板引入，引入a.wxml模板时，只会渲染a模板里面的，之外不会被渲染，倘若a模板里面被嵌套了b模板，b模板也不会被渲染
    <import src="a.wxml"></import>
    <template is="a"></template>
    <view>hello,world</view>
    <template name="a">
        Hello World!
    </template>  //输出   Hello World!
  • include 引入目标文件之外的所有代码
  <include src="a.wxml"></include>
    <template is="a"></template>
    <template name="a">
        <view>This is a.wxml</view>
    </template>
    <view>Hello,world</view> //输出Hello world

wxss开发框架--wxss

  • 尺寸单位 rpx
  • 样式导入 '@import "../../wxParse/wxParse.wxss";'
  • 内联样式 :一般动态样式写入style中，静态样式写入外联样式内
style="width:500rpx;background-color:{{colorValue}}"
Page({
    data:{
        colorValue:'red';
    }
})
  • 选择器
  • 选择器权重 element<.element<#element<style<!important

开发程序--wxs

  • 模块，变量，注释，运算符，语句，数据类型，基础类库
    1.运算符：等值运算符，赋值运算符，二元逻辑运算符，基本运算符，一元运算符，位运算符，比较运算符
    2.数据类型：number,string,bollean,object,array,function,data,regexp 3.基础类库：Number,Date,Global,console,Math,Json

运行机制--冷启动和热启动

开发框架--生命周期

开发框架--路由

1. 路由方式

<navigator url="/pages/detail/detail" open-type='navigate' style='border:1px solid red;' >进入非tab页</navigator>
<navigator url="/pages/index/index" open-type='switchTab' >进入首页(tab页)</navigator>
<navigator url="/pages/index/index" open-type='switchTab' >进入首页(tab页)</navigator>
<navigator open-type='navigateBack' >回退</navigator>
  • navigateTo, redirectTo 只能打开非 tabBar 页面。
  • switchTab 只能打开 tabBar 页面。
  • reLaunch可以打开任意页面,但是没有返回按钮，需要定义一个可以点击回退的按钮。
  • 页面底部的 tabBar由页面决定，即只要是定义为tabBar的页面，底部都有 tabBar。
  • 调用页面路由带的参数可以在目标页面的onLoad中获取。

2.路由参数

  • 从列表页进入详情页时，需要传递列表被点击项目的 id 至详情页，方法：
    1.在列表页通过data-id='{{item.id}}'给各个项目绑定一个 id
<view class="list" >
    <view class='box'  wx:for='{{list}}' wx:key='{{index}}' data-id='{{item.id}}' bindtap='goDetail'>
    </view> 
</view>

/ 进入详情页时 传递 id
goDetail (e) {
    console.log(e.currentTarget.dataset.id),
    wx.navigateTo({
        url: `/pages/detail/detail?id=${e.currentTarget.dataset.id}`,
    })
},

2.在详情页通过onload 拿到 id;

// pages/detail/detail.js
Page({
 
    data: {
        detail: {},
        loading: true
    }, 
    
    onLoad: function (options) {
        this.loadDetail(options.id); // 拿到列表页传过来的 id
        console.log(options.id)
    },

    loadDetail (id) {
        wx.showLoading({
            title: '详情加载中...',
        })

        wx.request({
            url: 'http://10.0.1.109:xxxx/list',
            success: (res) => {
                console.log(res.data.cityList);
                let thisPlace = res.data.cityList.filter((val) => val.id == id)
                console.log(thisPlace)
                this.setData({ 
                    detail: thisPlace[0],
                    loading: false
                });
                console.log(this.data.detail)
                wx.hideLoading();
            }
        })
    },

})

开发框架-事件

<!-- index.wxml -->
  <view>
      <view class="btn" bindtap="clickMe"></view>
  </view>
<!-- index.js -->
  Page({
      clickMe(e):{
        console.log(e) //输出e如下图
      }
})

  • 事件可分为三阶段：事件捕获，事件处理，事件冒泡

  • 阻止事件冒泡： event.stopPropagation();

开发框架--组件

  • 小程序所提供组件：媒体组件，地图，开放能力，画布，视图容器，基础内容，表单组件，导航
  • 视图容器：view,scroll-view,swiper,movable-view,cover-view
  • 基础内容：icon,progress,rich-text,text
  • 表单组件：button,checkbox,checkbox-group,editor,form,input,label,picker,picker-view,picker-view-column,radio,radio-group,slider,switch,textarea
avatar
文章
阅读
粉丝