微信小程序实战教程1：基础知识

2019-6-24

1 准备工作

微信小程序的语法与vueJS类似，没学过vueJS的同学尽量先过一遍vue再看本教程。

首先在微信平台中注册一个账号获得开发者AppID，如下载微信小程序的开发者工具，安装完毕后打开开发者工具创建一个项目，将项目名称位置AppID填入即可。

2 文件目录及每个文件的功能

微信小程序的文件有四类，分别是.wxml文件，.wxss文件，.js文件，.json文件。 其中.wxml对应.html文件，.wxss文件对应.css文件，.json文件是配置文件。pages文件夹中每一个文件夹代表一个页面，新建的项目有两个页面，分别四index和logs页面，每个页面包含一个.js文件，一个.wxml文件，一个.wxss文件以及一个.json文件。四类文件的作用稍后会讲到。

utils文件存放的是工具类，这个文件夹是非必须的，可以直接删掉。

project.config.json与sitemap.json初学者可以暂时不理会。

2.1 .wxml文件

.wxml文件类似我们写的.html文件，但标签上有些不同。

使用<view></view>标签代替<div></div>，使用<image></image>代替<img/>，使用<block></block>标签代替<template></template>，引入<text></text>标签等等，后续做项目的时候会了解到更多标签。

<!--新建项目的index.wxml文件-->
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>
复制代码

2.2 .wxss文件

.wxss文件就是.css文件。在app.wxss中控制全局样式，在pages文件夹中的页面文件的.wxss文件中控制局部样式。局部样式的优先级大于全局样式。

微信小程序推荐的布局方式是弹性布局（弹性布局快速入门点这里）,使用弹性布局可以很快速的搭建我们的项目。

微信小程序为了适配多种不同屏幕大小的设备，采取了一种的响应式单位rpx，使用rpx单位就好像使用百分比作为单位一样实现响应式布局。rpx是一种相对大小，我们使用iphone6的机型时，1px=2rpx，iphone6的大小为375px*667px，对于的rpx为750rpx*1334rpx。关于rpx的更多了解见wxss.html#尺寸单位

2.3 .json文件

.json文件是项目的配置文件

//-新建项目的app.json文件
{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}
复制代码

pages是存放所有页面的数组,每一个使用到的页面都需要写入pages内，不需要写文件后缀，window属性配置的是状态栏的样式，如navigationBarBackgroundColor用于设置背景色，navigationBarTitleText设置状态栏显示的文本，navigationBarTextStyle设置状态栏文本的颜色，只能传入black/white，除此之外还可以配置底部导航栏tabBar等等。

app.json文件进行全局配置，每个页面文件夹下还有一个.json文件用于局部配置，局部配置只能配置window属性

//局部配置.json文件,这里的配置会覆盖app.json中的window属性
{
  "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
}
复制代码

注意事项

  • 必须用一对大括号将属性包围起来，写成json字符串的格式。
  • 属性名必须用双引号包围起来.
  • .json文件中不可以写注释。

2.4.js文件

小程序的生命周期分为应用声明周期和页面生命周期，应用声明周期函数在app.js中定义，且在小程序运行过程中一直存在内存中处于运行状态，在这里可以定义应用声明周期函数以及定义全局变量。每个页面中的.js文件中则可以定义页面声明周期函数等，语法类似vueJS。

小程序为了提高性能，是不允许开发者操作DOM元素的。

//新建项目的app.js文件，通过App方法声明
App({
  onLaunch: function () {
   //页面渲染前执行
  },
  globalData: {
    //定义全局变量
    userInfo: null  
  }
});
//页面的.js文件，通过Page方法声明
Page({
    
});
复制代码

3 指令

小程序中常用的指令有wx:for、wx:if、wx:elif、wx:else等。

//wxml
<view>
    <text wx:if="count>0">{{count}}</text>
    <text wx:elif="count<0">{{count}}</text>
    <text wx:else>{{count}}</text>
</view>
//js
data() {
    return {
        count:0
    }
}
复制代码

wx:if、wx:elif、wx:else的逻辑等同于if else。

//wxml
<view>
    <text wx:for="arr" wx:for-item="value" wx:for-index="index">
        {{index}}.{{value}}
    </text>
</view>
//js
data() {
    return {
        arr:[
            '小明',
            '小红',
            '李雷'
        ]
    }
}
输出===>
<view>
    <text>1.小明</text>
    <text>2.小红</text>
    <text>3.李雷</text>
</view>
复制代码

wx:for即循环生成标签。

4 事件

小程序中不使用click事件，而用tab（触摸）事件代替，事件的前缀有两种分别是bind和catch，bind:tab表示冒泡事件，即事件触发后继续冒泡触发后续事件，catch:tab表示非冒泡事件，即事件触发后不再冒泡，类似执行了event.stopPropagation()方法。

//实现一个点击加一的计数器
//wxml
<view>
    <text bind:tab="addNumber">{{count}}</text>
</view>
//js
Component({
    //调用组件传来的变量
    properties:{
    },
    //内部变量
    data() {
        return {
            count:0
        }
    },
    //内部方法
    methods:{
        //点击加一
        addNumber() {
            this.setData({
               count:count+1 
            });
        }
    }
});
复制代码

改变data中的属性值必须使用this.setData()方法，传入一个对象，对象中存放需要改变的属性键值对。

bind:tab可以简写为bindtb，个人喜欢bind:tab，看起来更清晰

5 组件

对于一个js文件，函数就是一个最小的、可复用的代码片段。而组件就是对于一个项目最小的、可复用的代码片段，他包括html、css、js代码，如我们常见的页面导航栏就可以做成一个组件，通过组件名字来使用，而不用将导航栏的代码复制粘贴到每个页面中。

5.1组件的使用

小程序的组件通过Component方法声明

//.js文件
Component({
    properties:{
        //接收外接传来的变量
    },
    data() {
        return {
            //组件内部的变量
        }
    },
    methods:{
        //组件内部的方法
    }
});
复制代码

声明完毕之后，在需要使用到该组件的页面中进行调用

//使用组件的页面的.json文件
{
    "usingComponents":{
        //由键值对组成，键表示组件的名字，值是组件的路径，也是不需要文件后缀
        "component-name":"/components/component/index"
    }
}
//使用组件的页面的.wxml文件
<view>
    <component-name />  <!--不需要传入properties-->
    <component-name userName="小明"/>  <!--传入properties-->
</view>
复制代码

5.2父子组件的传值

首先我们看一下使用组件内部变量的例子，我们定义了userName变量并把它渲染到页面当中。

//component .wxml文件
<view>
    <text>Hello {{userName}},how are you?</text>
</view>
//component .js文件
Component({
    properties:{
        //接口外接传来的变量
    },
    data() {
        return {
            userName:"李雷"
        }
    }
});
复制代码

5.2.1父组件向子组件传值

接着我们接受一个外部的变量并把它渲染到页面上，这样就实现了父组件向子组件传值。

//component .wxml文件
<view>
    <text>Hello {{userName}},how are you?</text>
</view>
//component .js文件
Component({
    properties:{
        userName:{
            type:String,    //调用该组件时传入的值的类型，可以是Number、String、Boolean、Object、Aray、Null(任意类型)
            value:"李雷"    //默认值，调用该组件时未传入userName时，则userName的值为预设值李雷
        }
    },
    data() {
        return {
            //组件内部变量
        }
    }
});
复制代码

5.2.2子组件向父组件传值

子组件向父组件传值的思路一般都是父组件监听一个自定义的事件，子组件触发这个事件同时将值传入，父组件监听这个事件的时候就可以拿到子组件传过来的值。

//component .wxml文件
<view>
    <text bind:tap="clickMe">Hello world</text>
</view>
//component .js文件
Component({
    properties:{
        //接口外接传来的变量
    },
    data() {
        return {
            //组件内部变量
        }
    }，
    methods:{
        //用户点击Hello world的时候向父组件传值
        clickMe() {
            //第一个参数为自定义事件名，父组件需要监听这个事件，第二个参数为需要传的值
            this.triggerEvent('clickMe',{msg:'Hello world'});
        }
    }
});
//parent.wxml
<!--监听clickMe事件-->
<component bind:clickMe="clickMe"></component>
//parent.js
clickMe(event) {
    console.log(event.detail.msg);//输出子组件传来的参数Hello world，子组件传来的参数都在event.deail中
}
复制代码

5.3注意事项

前面我们说到了可以在app.wxss中定义全局样式，每个page页面都可以继承全局样式。但组件不同，组件只能继承有关字体以及color的样式，其他全局样式不能影响到组件的样式。

6 声明周期

小程序的声明周期分为整个应用的声明周期以及单个页面的声明周期，对于初学者来说这部分内容可以先跳过，它就像一幅眼镜，你自然会知道什么时候需要。

6.1 应用生命周期回调函数

在app.js中调用的App函数中，可以设置应用声明周期的回调函数

App({
  onLaunch (options) {
    //初始化完成后执行
  },
  onShow (options) {
    //进入小程序后执行
  },
  onHide () {
    //离开小程序后执行，注意不是销毁，如切换其他App时，微信处于后台中，这时调用onHide
  },
  onError (msg) {
    //小程序出错时执行
  }
});
复制代码

6.2 页面的生命周期回调函数

Page({
  onLoad: function(options) {
    //页面初始化后执行
  },
  onReady: function() {
    //初次渲染结束执行
  },
  onShow: function() {
    //进入页面执行
  },
  onHide: function() {
//页面隐藏/切入后台时触发，如 wx.navigateTo 或底部 tab 切换到其他页面，小程序切入后台等  
  },
  onUnload: function() {
    //页面卸载时触发。如wx.redirectTo或wx.navigateBack到其他页面时。
  },
  onPullDownRefresh: function() {
    // Do something when pull down.监听下拉刷新事件,必须开启enablePullDownRefresh
  },
  onReachBottom: function() {
    // Do something when page reach bottom. 监听用户上拉触底事件
  },
  onShareAppMessage: function () {
    // return custom share data when user share.点击转发按钮
  },
  onPageScroll: function() {
    // Do something when page scroll 页面滚动事件
  },
  onResize: function() {
    // Do something when page resize旋转屏幕触发
  },
  onTabItemTap(item) {
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // Event handler.
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  customData: {
    hi: 'MINA'
  }
})

复制代码

6.3 组件生命周期回调函数

Component({
  lifetimes: {
	created:function() {
		//组件实例化的时候执行，此时不能调用setData()
	}
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
});
复制代码

7零碎知识点

7.1<image>

<image>标签中，不管图片多大，默认的图片大小宽度为300px,高度为225px，所以一定要给图片设置宽高。

7.2页面最外层元素

html页面中最外层的元素为<html>，小程序中的最外层元素为<page>，且<page>不需要自己添加啊，小程序自动添加的。

7.3开启识别转义字符

<text></text>标签中默认不能识别&nbsp;&lt;&gt;等转移字符,设置decode属性即可识别这些转移字符。

<text>&lt;&nbsp;&gt;<text>
==>输出，不可识别转移字符
&lt;&nbsp;&gt;
<text decode="{{true}}">&lt;&nbsp;&gt;<text>
==>输出，可以识别转移字符
< >
复制代码

7.4 隐藏元素

VueJS中使用v-if控制元素是否渲染，使用v-show控制元素是否显示。微信小程序中也有对应的操作，使用wx:if控制元素是否渲染，使用属性hidden控制元素是都显示。

<!--渲染且显示(display:inline)-->
<text>Hello World<text>
<!--渲染但不显示(display:none)-->
<text hidden="{{true}}">Hello World<text>

作者：再见骷颅王
链接：https://juejin.im/post/5cf9efaa51882526a42af5f3
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

THE END
微信小程序实战教程：使用vscode开发
<<上一篇
微信小程序实战教程2：模仿知乎
下一篇>>
相关推荐
小程序安全性加固的三个方法
微信小程序开发获取用户位置、腾讯内置地图
小程序备案详细操作流程
微信小程序备案怎么做？5步极简教程版
小程序开发是什么价格？贵不贵？
广东、湖北、内蒙古多地通管局：4月1日起未备案APP小程序将被下架
微信小程序简便注销方法及流程（无需对公打款免备案烦恼）
App备案流程、时间要求和常见问题