1. 技术文章
  2. 《微信小程序入门与实践》

《微信小程序入门与实践》

由 故事扮演 提交于 2020-12-14 23:10:49

7insummer/orange-can: 《微信小程序入门与实践》一书小程序源代码

一般大家惯用的做法是 HTML 用双引号，JS 用单引号，这样在 JS 中拼 HTML 片段不用转义

elem.innerHTML = '<div class="post"></div>';

数据绑定 DATA BINDING

在真实项目中，业务数据通常放置在自己服务器中，通过http请求访问服务器提供的RESTful API，从而实现数据获取。

A RESTful API is an application program interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data.

硬编码和软编码的区别

数据绑定的两种形式：

  1. 初始化数据的绑定。直接将数据写在Page方法参数的data对象中。
// .js
Page({
    /**
     * 页面的初始数据
     */
    data: {
        date: "Jan 28 2017",
        title: "小时候的冰棍儿与雪糕",
        postImg: "/images/post/post-4.jpg",
        avatar: "/images/avatar/avatar-5.png",
        content: "冰棍儿",
        readingNum: 92,
        collectionNum: 109,
        commentNum: 7
    } // ,
})
  1. 使用setData方法做数据绑定，动态更新数据。但会引起页面的Rerender重新渲染。
数据接收
查看数据绑定对象

调试 > AppData > 编译

绑定复杂对象

下面恴data不再是简单的对象，它的属性中包含有对象和数组。

// .js
Page({
    /**
     * 页面的初始数据
     */
    data: {
        object:{
            dete:'jan 28 2017'
        },
        title:'小时候',
        postImg:'/images/post/post-4.jpg',
        avatar:'/images/avatar/avatar-5.png',
        content:'冰棍与雪糕不是同一个东西',
        readingNum:92,
        collectionNum:{
            array:[108]
        },
        commentNum:7
    } // ,
})
数据接收
<view class="post-container">
    <view class="post-author-date">
        <image src="{{avatar}}"></image>
        <text>{{object.date}}</text>
    </view>

    <text class="post-title">{{title}}</text>
    <image class="post-image" src="{{postImg}}" mode="widthFix"></image>

    <text class="post-content">{{content}}</text>
    <view class="post-like">
        <image src="/images/icon/wx_app_collect.png"></image>
        <text>{{collectionNum.array[0]}}</text>

    	<image src="/images/icon/wx_app_view.png"></image>
        <text>{{readingNum}}</text>

        <image src="/images/icon/wx_app_message.png"></image>
        <text>{{commentNum}}</text>
    </view>
</view>
数据更新

使用setData函数做数据绑定，可以看做是数据更新，setData方法位于Page对象的原型链上：Page.prototype.setData。

但通常使用this.setData来调用这个方法。this.setData的执行会改变this.data里的值。

// .js
Page({
	/**
     * 页面的初始数据
     */
    data: {
        title:'小时候' // ,
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        console.log('onLoad: Page load succeeded');
        this.setData({
            'title': 'new title in here'
        })
    } // ,
})
使用setData直接设置数据绑定
// .js
Page({
    /**
     * 页面的初始数据
     */
    data: {
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        console.log('onLoad: Page load succeeded');
        var iceCreamData={
            object:{
                date:'Jan 28 2017'
            },
            title: 'title in here',
            postImg: '/images/post/post-4.jpg',
            avatar: '/images/avatar/avatar-5.png',
            content: 'content in here',
            readingNum: 1,
            collectionNum: {
                array: [2]
            },
            commentNum: 3
        }
        this.setData({
            postData: iceCreamData
        })
    }
})
数据接收
// .wxml
<view class="post-container">
    <view class="post-author-date">
        <image src="{{postData.avatar}}"></image>
        <text>{{postData.object.date}}</text>
    </view>

    <text class="post-title">{{postData.title}}</text>
    <image class="post-image" src="/images/post/post-4.jpg" mode="widthFix"></image>

    <text class="post-content">{{postData.content}}</text>
    <view class="post-like">
        <image src="/images/icon/wx_app_collect.png"></image>
        <text>{{postData.collectionNum.array[0]}}</text>

        <image src="/images/icon/wx_app_view.png"></image>
        <text>{{postData.readingNum}}</text>

        <image src="/images/icon/wx_app_message.png"></image>
        <text>{{postData.commentNum}}</text>
    </view>

</view>

关于数据绑定的错误，小程序编译时没有任何错误或警告提醒。如果调试时整个页面空白，可以到AppData面板进行调试。

列表渲染 wx:for

关键字：数组。this.setData的key值改为postList。

// .js
Page({
    /**
     * 页面的初始数据
     */
    data: {},

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function(options) {
        console.log('onLoad: Page load succeeded');
        var postList=[
            {
                object: {
                    date: 'Jan 1 2017'
                },
                title: 'title 1 in here',
                postImg: '/images/post/post-1.jpg',
                avatar: '/images/avatar/avatar-1.png',
                content: 'content in here',
                readingNum: 1,
                collectionNum: {
                    array: [1]
                },
                commentNum: 1
            },{
                object: {
                    date: 'Jan 2 2017'
                },
                title: 'title 2 in here',
                postImg: '/images/post/post-2.jpg',
                avatar: '/images/avatar/avatar-2.png',
                content: 'content in here',
                readingNum: 2,
                collectionNum: {
                    array: [2]
                },
                commentNum: 2
            },{
                object: {
                    date: 'Jan 3 2017'
                },
                title: 'title 3 in here',
                postImg: '/images/post/post-3.jpg',
                avatar: '/images/avatar/avatar-3.png',
                content: 'content in here',
                readingNum: 3,
                collectionNum: {
                    array: [3]
                },
                commentNum: 3
            }
        ]

        this.setData({
            postList: postList
        })
    }
})
使用列表渲染改写文章列表
<block wx:for="{{postList}}" wx:for-item="item">
<view class="post-container">
    <view class="post-author-date">
        <image src="{{item.avatar}}"></image>
        <text>{{item.object.date}}</text>
    </view>

    <text class="post-title">{{item.title}}</text>
    <image class="post-image" src="/images/post/post-4.jpg" mode="widthFix"></image>

    <text class="post-content">{{item.content}}</text>

    <view class="post-like">
        <image src="/images/icon/wx_app_collect.png"></image>
        <text>{{item.collectionNum.array[0]}}</text>
        <image src="/images/icon/wx_app_view.png"></image>
        <text>{{item.readingNum}}</text>
        <image src="/images/icon/wx_app_message.png"></image>
        <text>{{item.commentNum}}</text>
    </view>

</view>
</block>

<block></block>标签无实质意义，称作标签，不是组件。

block标签上放置了一个wx:for属性，它绑定一个数组postList，它对应post.js文件中的setData数组数据。

wx:for-item指定数组当前元素的变量名，默认为为item。

view组件通常被用来当作容器或区域分隔。

全局配置

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

window

用于设置小程序的状态栏、导航条、标题、窗口背景色。

{
    "window":{
        "navigationBarBackgroundColor": "#ECC0A8",

        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "Title in Here",
        "enablePullDownRefresh": true
    }
}

文章数据从业务中分离

不懂：业务层 模块 模板 缓存

编程世界里遇到的绝大多数问题都可以用封装的思想来解决。

将.js文件中中的postList数组数据剪切到/data/data.js文件中。data.js可是做小程序的一个模块，它必须向外暴露一个接口。

将postList数据剪切到data.js文件，并向外暴露模块接口
// data/data.js

var postList = [
    {
        object: {
            date: 'Jan 1 2017'
        },
        title: 'title 1 in here',
        postImg: '/images/post/post-1.jpg',
        avatar: '/images/avatar/avatar-1.png',
        content: 'content in here',
        readingNum: 1,
        collectionNum: {
            array: [1]
        },
        commentNum: 1
    }, {
        object: {
            date: 'Jan 2 2017'
        },
        title: 'title 2 in here',
        postImg: '/images/post/post-2.jpg',
        avatar: '/images/avatar/avatar-2.png',
        content: 'content in here',
        readingNum: 2,
        collectionNum: {
            array: [2]
        },
        commentNum: 2
    }, {
        object: {
            date: 'Jan 3 2017'
        },
        title: 'title 3 in here',
        postImg: '/images/post/post-3.jpg',
        avatar: '/images/avatar/avatar-3.png',
        content: 'content in here',
        readingNum: 3,
        collectionNum: {
            array: [3]
        },
        commentNum: 3
    }
]

module.exports={
    postList: postList
}
引入模块

require(path)将模块引入到post.js文件中，并将模块对象赋值给dataObj变量。

注意：path路径应使用相对路径。

// .js
var dataObj = require('../../data/data.js');

Page({
    /**
     * 页面的初始数据
     */
    data: {},

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        console.log('onLoad: Page load succeeded');

        this.setData({
            postList: dataObj.postList
        })
    }
})
数据接收
// .wxml
<block wx:for="{{postList}}" wx:for-item="item">
<view class="post-container">
    <view class="post-author-date">
        <image src="{{item.avatar}}"></image>
        <text>{{item.object.date}}</text>
    </view>

    <text class="post-title">{{item.title}}</text>
    <image class="post-image" src="/images/post/post-4.jpg" mode="widthFix"></image>

    <text class="post-content">{{item.content}}</text>

    <view class="post-like">
        <image src="/images/icon/wx_app_collect.png"></image>
        <text>{{item.collectionNum.array[0]}}</text>
        <image src="/images/icon/wx_app_view.png"></image>
        <text>{{item.readingNum}}</text>
        <image src="/images/icon/wx_app_message.png"></image>
        <text>{{item.commentNum}}</text>
    </view>

</view>
</block>

ECMAScript是一种由Ecma国际通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMA-262标准的实现和扩展。 维基百科

编写模板

将post.wxml中<block>标签下的内容剪切到../../post/post-item/post-item-tpl.wxml文件中。

<!-- post/post-item/post-item-tpl.wxml -->

<template name="postItemTpl">
<view class="post-container">
    <view class="post-author-date">
        <image src="{{item.avatar}}"></image>
        <text>{{item.object.date}}</text>
    </view>

    <text class="post-title">{{item.title}}</text>
    <image class="post-image" src="/images/post/post-4.jpg" mode="widthFix"></image>

    <text class="post-content">{{item.content}}</text>

    <view class="post-like">
        <image src="/images/icon/wx_app_collect.png"></image>
        <text>{{item.collectionNum.array[0]}}</text>
        <image src="/images/icon/wx_app_view.png"></image>
        <text>{{item.readingNum}}</text>
        <image src="/images/icon/wx_app_message.png"></image>
        <text>{{item.commentNum}}</text>
    </view>

</view>
</template>
引用模板
<!--pages/psot/post.wxml-->

<import src="post-item/post-item-tpl.wxml"/>

<block wx:for="{{postList}}" wx:for-item="item">
    <template is= "postItemTpl" data="{{item}}" />
</block>
消除template模板对外部变量名的依赖

使用扩展运算符…，展开传入对象变量来消除这个问题。

去掉所有的item
<!-- post/post-item/post-item-tpl.wxml -->

<template name="postItemTpl">
<view class="post-container">
    <view class="post-author-date">
        <image src="{{avatar}}"></image>
        <text>{{object.date}}</text>
    </view>

    <text class="post-title">{{title}}</text>
    <image class="post-image" src="/images/post/post-4.jpg" mode="widthFix"></image>

    <text class="post-content">{{content}}</text>

    <view class="post-like">
        <image src="/images/icon/wx_app_collect.png"></image>
        <text>{{collectionNum.array[0]}}</text>
        <image src="/images/icon/wx_app_view.png"></image>
        <text>{{readingNum}}</text>
        <image src="/images/icon/wx_app_message.png"></image>
        <text>{{commentNum}}</text>
    </view>

</view>
</template>
数据接收，使用扩展运算符展开对象
<block wx:for="{{postList}}" wx:for-item="item">
    <template is= "postItemTpl" data="{{...item}}" />
</block>

如果模块是静态wxml，不涉及数据的传递，可以使用include。如果模板设计数据绑定，建议使用import。

CSS模块化

将post.wxss中与文章相关的样式所有以post-开头的样式，全部剪切到post-item-tpl.wxss文件中，post.wxss文件只留下swiper组件相关样式。

/* post/post-item/post-item-tpl.wxss */

.post-container{
    flex-direction: column;
    display: flex;
    margin: 20rpx 0 40rpx;
    background-color: #fff;
    border-bottom: 1px solid #eded;
    border-top: 1px solid #ededed;
    padding-bottom: 5px;
}

.post-author-date{
    margin: 1orpx 0 20rpx 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.post-author-date image{
    width: 60rpx;
    height: 60rpx;
}

.post-author-date text{
    margin-left: 20px;
}

.post-image{
    width: 100%;
    height: 340rpx;
    margin-bottom: 15px;
}

.post-date{
    font-size: 26rpx;
    margin-bottom: 10px;
}

.post-title{
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
    margin-left: 10px;
}

.post-content{
    color: #666;
    font-size: 26rpx;
    margin-bottom: 20rpx;
    letter-spacing: 2rpx;
    line-height: 40rpx;
}
.post-like{
    display: flex;
    flex-direction: row;
    font-size: 13px;
    line-height: 16px;
    margin-left: 10px;
    align-items: center;
}

.post-like image{
    height: 16px;
    width: 16px;
    margin-right: 8px;
}
.post-like text{
    margin-right: 20px;
}
引入模板样式文件
/* .wxss */
@import "aaatry-item/aaatry-item-tpl.wxss";
使用缓存在本地模拟服务器数据库
使用Storage缓存初始化本地数据库

在app.js异步缓存

var dataObj=require('data/data.js')

App({

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
    //   wx.setStorageSync('postList', dataObj.postList);
    wx.setStorage({
        key: 'postList',
        data: dataObj.postList,
        success: function(res){
            console.log('success');
        }
    })
  }
})

同步缓存

var dataObj=require('data/data.js')

App({

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
      wx.setStorageSync('postList', dataObj.postList); //同步缓存
  }
})

同步缓存优化

App({
  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
      var storageData = wx.setStorageSync('postList');
      if(!storageData){
          var dataObj = require('data/data.js');
          wx.clearStorageSync();
          wx.setStorageSync('postList', dataObj.postList); //同步缓存
      }
  }
})
缓存数据库操作类

关键字：

​ 类 数据库操作类

ES6让JavaScript焕发新生。

FIRSTPART - Brief

如何开发微信小程序？ 最新版本下载地址 下载安装并打开微信 web 开发工具。

小程序组成：3 个应用程序级别文件 + 若干个应用程序级别平行的文件夹。

每个文件夹中有 4 个页面级别文件。

在一个小程序项目中

  1. 根目录下有 3 个必须的、描述 app 的应用程序级别文件：app.js、app.json 和 app.wxss。

| 2. | 文件 | 必要性 | 作用 | | -------- | ---- | ---------------------------------------------------------------------------------------------------------------------------- | | app.js | 是 | 逻辑文件（不能为空，必须调用Page({})方法。） | | app.json | 是 | 配置文件（不能为空，必须添加{}代码。在小程序中注册页面——页面的添加和删除都需要在pages 数组下增减对应的页面路径。） | | app.wxss | 否 | 全局公共样式文件（可以为空。） |

  1. 这三个文件是应用程序级别的文件，接着是应用程序级别文件平行的 pages 文件夹。一个小程序由若干个页面文件构成，每个页面由 .js、.json、.wxml 和。wxss 4 个页面级别文件构成。

| 4. | 文件类型 | 必要性 | 作用 | | ----- | -------- | ---------- | | .js | 是 | 页面逻辑 | | .json | 否 | 页面配置 | | .wxml | 是 | 页面结构 | | .wxss | 否 | 页面样式表 |

注意：

  1. .js 文件不可以完全为空白，否则小程序会报错。.js 文件不允许为空文件，即使没有任何JavaScript 代码，也要主动调用Page() 方法。

    Page({

})

  2. .json 文件不可以为空白，即使不在json 文件中配置任何属性，也需要加入一个空的 {} ，以保证小程序能正确执行。

    1. 在"pages":[]数组中注册页面

      {
    "pages":[
        "pages/post1/post1",
        "pages/post2/post2"
    ]
}

      注意：注册多个页面用,分开，最后一个页面不可添加,。

页面文件作用于页面本身，应用程序文件作用于应用程序整体。

真实项目中图片资源尽量不要存储在小程序的目录中，应该将图片都存放在服务器上，让小程序通过网络来加载图片资源。因为小程序的大小不能超过 2MB，超过则无法真机运行和发布项目。

app.json文件

{
    "pages":[
        "pages/welcome/welcome"
    ],
    "window":{
        "navigationBarBackgroundColor": "#ECC0A8"
    }
}

  1. app.json中的pages 配置项，用来注册小程序页面文件。

  2. window 配置项可用来设置小程序的状态栏、导航栏、标题和窗口的背景色。

    navigationBarTextStyle 配置导航栏文字颜色，只支持 black/ white navigationBarTitleText 配置导航栏文字内容。 backgroundColor 配置窗口颜色。 backgroundTextStyle 下拉背景字体，仅支持 dark/light。 enablePullDownRefresh 是否开启下拉刷新。

.wxss样式表

.container{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.avatar{
    width: 200rpx;
    height: 200rpx;
    margin-top: 160rpx;
}

更改页面 text 组件字体

text{
    font-family: Microsoft YaHei;
}

在全局样式表app.wxss中可以为所有页面设置默认样式，其他公共样式字体大小font-size，字体颜色color。

page是MINA 框架默认添加一个容器元素。page 代表着整个页面的容器，如果想对页面整体做样式或者属性设置，应该考虑 page 这个页面根元素

小程序最重要的概念——数据绑定。

<swiper indicator-dots='true' autoplay='true' interval='5000'  circular='true'>
</swiper>

swiper 组件

  • indicator-dots属性，Boolean 类型，是否显示面板指示点，默认为false。
  • autoplay属性，Boolean 类型，决定是否自动播放，默认为 false。
  • interval属性，Number 类型，设置swiper-item切换时间间隔，默认为5000ms。​
  • circular属性，Boolean 类型，轮播图循环滚动，默认为false。

注意：所有组件的 Boolean 类型属性都有Boolean 陷阱。

PENULTIMATEPART - TOOL

  • 程序调试

    【调试】【Console】

  • 查看数据绑定

    【调试】【AppData】

LASTPART - APPENDIX

通用 微信小程序框架

  • 官方框架 MINA

    小程序提供的开发框架为 MINA 框架。

    框架提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

    整个小程序框架系统分为两部分：

    视图层（View）和逻辑层（App Service）

    框架可以让数据与视图非常简单地保持同步。当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。

通用 Boolean 值陷阱

Boolean 不空为真

Boolean 以下值为假

  1. 不设置该属性
  2. 空字符串' '
  3. {%raw%}'{{false}}'{%endraw%}

按钮 页面跳转

<!--.wxml-->
<view class="container">
    <view catchtap="onTapJump" class="journey-container">
        <text class="journey">Go U_u Home</text>
    </view>
</view>

/*.wxss */
.container{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.journey-container{
    margin-top: 200rpx;
    border: 1px solid #EA5A3C;
    width: 200rpx;
    height: 80rpx;
    border-radius: 5px;
    text-align: center;
}
.journey{
    font-size: 22rpx;
    font-weight: bold;
    line-height: 80rpx;
    color: #EA5A3C;
}

//.js
Page({
    onTapJump: function (event) {
        wx.redirectTo({
            url: '../welcome/welcome',
            //url: '/pages/welcome/welcome',
            success: function () {
                console.log("jump success");
            },
            fail: function () {
                console.log("jump failed");
            },
            complete: function () {
                console.log("jump complete");
            }
        });
    },
    /**
     * 页面的初始数据
     */
    data: {

    },

    /**
     * 生命周期函数 -- 监听页面加载
     */
    onLoad: function (options) {
        console.log("onLoad: 页面加载中");
    },

    /**
     * 生命周期函数 -- 监听页面初次渲染完成
     */
    onReady: function () {
        console.log("onLoad: 页面渲染中");
    },

    /**
     * 生命周期函数 -- 监听页面显示
     */
    onShow: function () {
        console.log("onLoad: 页面显示中");
    },

    /**
     * 生命周期函数 -- 监听页面隐藏
     */
    onHide: function () {
        console.log("onLoad: 页面隐藏中");
    },

    /**
     * 生命周期函数 -- 监听页面卸载
     */
    onUnload: function () {
        console.log("onLoad: 页面卸载中");
    },

    /**
     * 页面相关事件处理函数 -- 监听用户下拉动作
     */
    onPullDownRefresh: function () {
        console.log("不要拉我");
    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        console.log("干嘛啦我");
    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    }
})

文章列表页面

组件 swiper

使用 swiper 组件构建 banner 轮播图。

<view>
    <swiper indicator-dots='true' autoplay='true' interval='2000'>
        <swiper-item><text>1</text></swiper-item>
        <swiper-item><text>2</text></swiper-item>
        <swiper-item><text>3</text></swiper-item>
    </swiper>
</view>

最外层的<view></view>作为整个页面的容器，在view内部，加入一个swiper组件。

  • swiper组件得直接子元素只可以是swiper-item，swiper-item组件下可以放置其他组件或元素。

  • swiper 滑块视图容器

属性名 类型 默认值 说明
indicator-dots Boolean false 是否显示面板指示点
indicator-color Color rgba(0, 0, 0, .3) 指示点颜色
indicator-active-color Color #000000 当前选中的指示点颜色
autoplay Boolean false 是否自动切换
current Number 0 当前所在滑块的 index
current-item-id String "" 当前所在滑块的 item-id ，不能与 current 被同时指定
interval Number 5000 自动切换时间间隔
duration Number 500 滑动动画时长
circular Boolean false 是否采用衔接滑动
vertical Boolean false 滑动方向是否为纵向
previous-margin String "0px" 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
next-margin String "0px" 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
display-multiple-items Number 1 同时显示的滑块数量
skip-hidden-item-layout Boolean false 是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息
bindchange EventHandle current 改变时会触发 change 事件，event.detail = {current: current, source: source}
bindtransition EventHandle swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}
bindanimationfinish EventHandle 动画结束时会触发 animationfinish 事件，event.detail 同上
  • 在.wxss文件中配置样式

组件 text

  • text 文本

组件 image

  • image 组件的缩放与裁剪模式
    • scaleToFill不保持纵横比缩放图片，填满 image 元素。
    • aspectFit保持纵横比缩放图片，显示长边，填满 image 元素。

事件

事件 · 小程序

  • 事件分为冒泡事件和非冒泡事件：
    • 冒泡事件：非冒泡事件：
    • bind 和 catch

WXML的冒泡事件列表：

类型 触发条件
touchstart 手指触摸动作开始
touchmove 手指触摸后移动
touchcancel 手指触摸动作被打断，如来电提醒，弹窗
touchend 手指触摸动作结束
tap 手指触摸后马上离开
longtap 手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
longpress 手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发

  • 事件：

    • 在wxml的组件上注册事件：注册是声明要监听组件什么类型事件。

      <view class="container">
    <view catchtap="function_name" class="journey-container">
        <text class="journey">Go U_u Home</text>
    </view>
</view>

    • 在js中编写事件处理函数。

      Page({
    function_name: function(event){
      wx.redirectTo({
        //   url: '../welcome/welcome', // 相对路径
          url: '/pages/welcome/welcome', // 绝对路径
          success: function(){
              console.log('success jump');
          },
          fail: function(){
              console.log("failed jump");
          },
          complete: function(){
              console.log("complete jump");
          }
      })
    } // ,
})

    • 代码中为Page方法的Object参数定义了一个函数： function_name。

在wxml组件中注册事件时，不可以直接使用tap="function_name"或longtap="function_name"，需要在事件名之前添加catch或bind前缀。

路由

名称：导航API；功能：页面跳转

方法 redirectTo

wx.redirectTo
wx.navigateTo

事件 catchtap

从一个页面跳转到另一个页面

<!--pages/post/post.wxml-->

<view catchtap='function_name' class='class_name1'>
    <text class='class_name2'>U_m
    </text>
</view>

// pages/post/post.js
Page({
	Jump: function(event){
	wx.redirectTo({
		//   url: ‘../welcome/welcome’, // 相对路径
		url: ‘/pages/welcome/welcome’, // 绝对路径
		success: function(){
			console.log(‘success jump’);
			}
		})
	}
})

文件 .json

  • 页面的 json 文件只能够配置和 window 相关的属性。
  • 但 app.json 除了可以配置 window 外还可以配罪 pages、tabBar 等选项。
  • 页面的 json 配置不需要像 app.json 加上 window 这个对象，直接在{}中编写配置项即可。

文件 .js

  • .js文件代码结构
    • 整个.js文件执行一个Page({})方法，参数是一个object对象，用来指定页面初始数据（data）、生命周期函数（on 开头）、事件处理函数等。
// pages/post/post.js
Page({
    /**
     * 页面的初始数据
     */
    data: {

    },

    /**
     * 生命周期函数 -- 监听页面加载
     */
    onLoad: function (options) {

    },

    /**
     * 生命周期函数 -- 监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数 -- 监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数 -- 监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数 -- 监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数 -- 监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    }
})
  • Page页面生命周期
    • 加载、显示渲染、隐藏、卸载
    • MINA 框架分别提供了 5 个生命周期函数来监听这 5 个特定的生命周期，见上。
Page({
    /**
     * 生命周期函数 -- 监听页面加载
     */
    onLoad: function (options) {
		console.log('onLoad：页面加载完成');
    }
})

mina-lifecycle.png

  • Page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。

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

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

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

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

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

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

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

onShareAppMessage 用户点击右上角转发

onPageScroll 页面滚动触发事件的处理函数

onTabItemTap 当前是 tab 页时，点击 tab 时触发

setData

小程序只实现单向数据绑定，即只支持从逻辑层传递到渲染层的数据绑定。

组件 for

文件 app.json

{
    "pages":[
        "pages/folder1/file1",
        "pages/folder2/file2",
        "pages/folder3/file3"
    ],
    "window":{
        "navigationBarBackgroundColor": "#ECC0A8",
        "enablePullDownRefresh": true,
        "navigationBarTextStyle": "white",
        "navigationBarTitleText": "welcome"
    }
}

  • app.json 配置项 window

    • window配置小程序的状态栏、导航栏、标题和窗口背景色。

  • app.json 配置项列表

属性 类型 必填 描述
pages String Array 是 页面路径列表
window Object 否 全局的默认窗口表现
tabBar Object 否 底部 tab 栏的表现
  • window 属性：用于设置小程序的状态栏、导航条、标题、窗口背景色。
属性 描述 类型 默认值
navigationBarBackgroundColor 导航栏背景颜色，如 #000000 HexColor #000000
navigationBarTextStyle 导航栏标题颜色，仅支持 black / white String white
navigationBarTitleText 导航栏标题文字内容 String
navigationStyle 导航栏样式，仅支持以下值： default 默认样式 custom 自定义导航栏，只保留右上角胶囊按钮。参见注 2。 String default
backgroundColor 窗口的背景色 HexColor #ffffff
backgroundTextStyle 下拉 loading 的样式，仅支持 dark / light String dark
enablePullDownRefresh 是否开启当前页面的下拉刷新。 详见 Page.onPullDownRefresh Boolean false
onReachBottomDistance 页面上拉触底事件触发时距页面底部距离，单位为 px。 详见 Page.onReachBottom Number 50
pageOrientation 屏幕旋转设置，支持 auto/ portrait / landscape 详见 响应显示区域变化 String portrait

颜色代码

  • 颜色表示方式

    • RGB 表示法
    • 十六进制 (hex) 表示法

    对光源进行设置是 RGB(0,0,0) ~ RGB(255,255,255) （#000000 ~ #FFFFFF）。

    十六进制值使用三个双位数来编写，并以 # 符号开头。

  • CSS 颜色名

    • HTML 和 CSS 颜色规范中定义了 147 中颜色名（17 种标准颜色加 130 种其他颜色）。下面的表格中列出了所有这些颜色，以及它们的十六进制值。
    • 提示：17 种标准色是 aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow。

颜色选择器

寻找完美色彩从未如此简单，使用我们的 HTML 颜色选择器来浏览上百万的颜色和色彩搭配。

颜色表

有了这些扁平化设计、Material Design 和网页安全颜色表，一定可以为您的网页或应用程序找到完美的色彩方案 – 只需不停地寻找！

尺寸单位

在小程序中，长度单位可以使用rpx和px，使用 rpx 可以使组件自适应屏幕的高度和宽度。

  • rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx，如在 iPhone6 上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素，即1rpx = 0.5px = 1 物理像素。
设备 rpx 换算 px （屏幕宽度 /750) px 换算 rpx (750/ 屏幕宽度)
iPhone6 1rpx = 0.5px 1px = 2rpx

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

微信小程序布局方式

  • Flex 布局

    .container{
    display: flex;
    flex-direction: column;
    align-items: center;
}

  • 小程序的Flex 布局称为弹性布局，主要作用在view 容器上。

    • 设置display: flex;是应用一切弹性布局属性的先决条件。
    • flex-direction: column;指定 view 容器内元素的排列方向垂直向下。 row 水平向右 column 垂直向下 row-reverse 水平向左 column-reverse 垂直向上
    • align-items :center;定义子元素的居中对齐方式。

页面的根元素 page

要修改页面整体的背景色，需要寻找一个包裹所有页面元素的容器——page，并设置这个容器的背景色。

尝试给页面最外层<view class="container"></view>一个背景色。在**.wxss 文件中.container 样式**中新增属性background-color: #ECC0A8;，但这只能使元素占据的地方显示效果。

.container{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ECC0A8;
}

page代表整个页面的容器，可以对页面整体做样式或属性设置。

page{
    background-color: #ECC0A8;
}

微信小程序组件

  • view

    • 通常作为容器，用来包裹其他组件。

  • text

    • 显示文本。

    • 在**.wxss**文件中更改页面中的 text 组件样式

      text{
    font-family: Microsoft Yahei;
    font-size: ;
    color: ;
}

    • 在全局样式表文件 app.wxss中添加代码，可以为所有页面设置默认样式。

  • image

    • 显示图片。

    • 组件需要设置一个src属性，该属性指向图片路径。

      <image src="/images/images.png"></image>

    • MINA 框架设置图片默认宽 300px，高 225px。

注意：描述 wxml 元素使用的是组件，描述 html 元素使用的是标签。

微信 web 开发者工具快捷键

  • 开发快捷键 ：

    快捷键 功能
    Ctrl + [ / ] 代码行缩进
    Ctrl + Shift + [ / ] 折叠，打开代码块
    Ctrl + C / V 复制、粘贴，如果没有选中任何文字则复制、粘贴一行
    Shift + Alt + F 代码格式化
    Alt + Up / Down 上下移动一行
    Shift + Alt + Up / Down 向上向下复制一行
    Ctrl + Shift + Enter 在当前行上方插入一行
    Ctrl + / 注释或者取消注释

  • 光标操作

    快捷键 功能
    Ctrl + U 光标回退
    Ctrl + I 选中当前行
    Ctrl + Shift + L 选中所有匹配
    Ctrl + D 选中匹配
    Esc 退出操作
标签
Data.js
FLEX
swiper
Here
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!