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

时间  2019-11-08 标签 微信 程序 实战 教程 1 基础 知识

完整教程请查看 微信小程序实战教程css

微信小程序实战教程——2实战之模仿知乎 传送门html

1 准备工做

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

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

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

微信小程序的文件有四类，分别是.wxml文件，.wxss文件，.js文件，.json文件。 其中.wxml对应.html文件，.wxss文件对应.css文件，.json文件是配置文件。

pages文件夹中每个文件夹表明一个页面，新建的项目有两个页面，分别四index和logs页面，每一个页面包含一个.js文件，一个.wxml文件，一个.wxss文件以及一个.json文件。四类文件的做用稍后会讲到。github

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

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文件中控制局部样式。局部样式的优先级大于全局样式。bash

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

微信小程序为了适配多种不一样屏幕大小的设备，采起了一种的响应式单位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>
复制代码

交流

若是这篇文章帮到你了，以为不错的话来点个Star吧。 github.com/lizijie123

联系我们 沪ICP备2021010478号-7