微信小程序实用指南1：基础知识

1准备工作

微信小程序的语法与vueJS类似。没有学过 vueJS 的同学在阅读本教程之前应该先尝试过一遍 vue。

首先，在微信平台注册一个账号，获取开发者AppID。例如下载微信小程序开发者工具。安装完成后，打开开发者工具创建项目，填写项目名称和AppID。

2 文件目录及各文件作用

微信小程序中有四种类型的文件，分别是.wxml 文件、.wxss 文件、.js 文件和.json 文件。其中，.wxml对应.html文件，.wxss文件对应.css文件，.json文件为配置文件。 Pages 文件夹中的每个文件夹代表一个页面。新创建的项目有两个页面、四个索引页和日志页。每个页面包含一个 .js 文件、一个 .wxml 文件、一个 .wxss 文件和一个 .json 文件。 。四种文件类型的功能将在后面讨论。

utils 文件存储实用程序。该文件夹不是必需的，可以直接删除。

project.config.json 和 sitemap.json 初学者现在可以忽略它。

2.1 .wxml 文件

.wxml 文件与我们编写的.html 文件类似，但标签有一些差异。

使用标签代替

，代替，标签代替> ，引入标签等。当你做其他项目时，你会学到更多的标签。

<!--新建项目的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"  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，iphone6的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是一个数组，存储所有页面，每个使用的页面都是必填的 时写入页面不需要写入文件扩展名。 window属性配置状态栏的样式。例如，navigationBarBackgroundColor用于设置背景颜色，navigationBarTitleText设置状态栏显示的文本，navigationBarTextStyle设置状态栏文本的颜色。只有黑色才能通过。 /white，除了配置底部导航面板tabBar等。

app.json 文件用于全局配置。每个页面文件夹中还有一个 .json 文件用于本地配置。本地配置只能配置窗口属性。

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

注释

• 必须用一对支架闭合。属性以 json 字符串格式包装和写入。
• 属性名称必须用双引号引起来。
• 您无法向文件.json 写入注释。

文件2.4.js

小程序的生命周期分为应用声明周期和页面生命周期。 app声明循环函数在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 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中定义全局样式，并且每个页面都可以继承全局样式。但组成部分不同。组件只能继承与字体和颜色相关的样式。其他全局样式不能影响组件的样式。

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 在

标签中，无论图片有多大，默认的图片尺寸都是宽300像素，高225像素。设置图像的宽度和高度。

7.2 最外层页面元素

html 页面最外层元素是 ，小程序中最外层元素是 ，你不需要自己添加 ，小程序是自动添加。

7.3 打开控制字符识别

标签默认不识别回车字符，例如 。这些进位字符可以通过设置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
来源：掘金作者归作者所有如有商业转载请联系作者授权。非商业转载请注明来源。