【微信小程序】微信小程序基础知识篇

开发文档

小程序简介 | 微信开放文档

1.微信小程序的环境准备

1.1注册账号

1.2获取APPID

是开发者唯一的身份认证，应用要发布要上线必须提供APPID

1.3开发工具

由于微信小程序自带开发者工具的编码体验不好，因此建议使用VS code 加微信小程序开发工具来实现编码，VS code负责敲代码，微信开发工具负责

 2.第一个微信小程序

3.微信开发者工具介绍

4.小程序结构目录

4.1小程序文件结构和传统web对比

4.2基本的项目目录 

5.小程序配置文件

5.1全局配置 app.json

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

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/index",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

5.1.1tabbar 

5.2页面配置page.json

每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。 

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

5.3sltemap 配置

小程序根目录下的 sitemap.json 文件用来配置小程序及其页面是否允许被微信索引。

例1：

{
  "rules":[{
    "action": "allow",
    "page": "*"
  }]
}

所有页面都会被微信索引（默认情况） 

例2： 

{
  "rules":[{
    "action": "disallow",
    "page": "path/to/page"
  }]
}

 配置 path/to/page 页面不被索引，其余页面允许被索引

这里不一一举例，想看更详情的内容可以到官方文档查看 

6.模板语法

  1 text 相当于以前web中的 span标签 行内元素 不换行

  2 view 相当于以前web中的 div标签 块级元素 换行

  3 checkbox 以前的复选框标签 

6.1数据绑定

在js中

Page({

  /**
   * 页面的初始数据
   */
  data: {
    msg: "hello mina",
    num:10000,
    isgirl:false,
    person:{
      age:74,
      height:145,
      weight:200,
      name:"富婆"
    },
    ischecked:false
  },

})

 在wxml中

{{msg}}

{{num}}

是否伪娘：{{isgirl}}

{{person.age}}
{{person.height}}
{{person.weight}}
{{person.name}}

自定义属性

6.2运算

 {{1+1}}
 {{'1'+'1'}}
 {{10%2===0 ? '偶数' : '奇数'}}

6.3列表渲染

在js中

Page({

  /**
   * 页面的初始数据
   */
  data: {
   
    person:{
      age:74,
      height:145,
      weight:200,
      name:"富婆"
    },
    ischecked:false,
    list:[
      {
        id:0,
        name:"猪八戒"
      },
      {
        id:1,
        name:"天蓬元帅"
      },
      {
        id:2,
        name:"悟能"
      },
    ]
  },

})

在wxml中

  
    索引:{{index}}
    --
    值:{{item.name}}
  



  对象循环
  
    属性：{{key}}
    --
    值：{{value}}
  




    
      索引:{{index}}
      --
      值:{{item.name}}
    

6.4条件渲染 

 
 条件渲染
 显示
 隐藏

 1
 2
 3

 
 

 ---------------
 wx:if
 

7.小程序事件的绑定

案例：事件1，在 输入框输入的内容实时映射到下面的标签中 

           事件2，点击按钮使内容加一或者减一

在wxml中

+
-

  {{num}}

在js中

Page({

  /**
   * 页面的初始数据
   */
  data: {
    num:0,
  },
  // 输入框的input事件的执行逻辑
  handleInput(e){
    // console.log(e);
    // console.log( e.detail.value);
    this.setData({
      num:e.detail.value
    })
  },
  // 加减按钮事件
  handletap(e){
    // console.log(e);
    // 获取自定义属性 operation
    const operation=e.currentTarget.dataset.operation;
    this.setData({
      num: this.data.num + operation
    })
  },
})

8.样式wxss 

8.1尺寸单位

rpx:可以根据屏幕宽度进行自适应。规定屏幕的宽为750rpx,与其他单位换算可以用calcs属性。

• 如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

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

注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

8.2样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。 

示例代码：

/** common.wxss **/
.small-p {
  padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

8.3选择器

小程序不支持通配符 * 

目前支持的选择器有：

选择器	样例	样例描述
.class	.intro	选择所有拥有 class="intro" 的组件
#id	#firstname	选择拥有 id="firstname" 的组件
element	view	选择所有 view 组件
element, element	view, checkbox	选择所有文档的 view 组件和所有的 checkbox 组件
::after	view::after	在 view 组件后边插入内容
::before	view::before	在 view 组件前边插入内容

8.4小程序中使用less 

原生小程序不支持less，可以用一下方式来实现

1.编辑器是VS code

2.安装插件 easy less

3.在VS code的设置中加入如下配置

  "less.compile": {
        "outExt": ".wxss"
    }

4.在要编写样式的地方新建less文件，如index.less，然后正常编辑即可 

 

 9.常见组件

9.1view

代替原来的div标签

9.2text

1.文本标签  2.只能嵌套text   3.长按文字可以复制（只有这个标签有这个功能） 

4.可以对空格回车编码

view和text组件更多详情可见官方文档

9.3image

 1.图片标签，image组件默认宽度320px,高度240px  2.支持懒加载

9.4swiper

9.5navigator 

 轮播图页面
 轮播图页面
 tabbar页面
 任意页面

9.6rich-text

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 1.标签字符串
    // html:'天猫会员'
    // 2.对象数组
    html: [
      {
      // 1 div标签 name属性来指定
      name: "div",
      // 2 标签上有那些属性
      attrs: {
        // 标签上的属性 class style
        class: "my_div",
        style: "color:red;"
      },
      // 3 子节点 children要接收的数据类型和nodes第二种渲染方式的数据一致
      children: [
        {
        name: "p",
        attrs: {},
        // 放文本
        children:[
          {
            type:"text",
            text:"hello"
          }
        ]
      }
     ]
    }
   ]
  }
})

9.7button

 
contact
share
getPhoneNumber
getUserInfo
launchApp
openSetting
feedback
chooseAvatar

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 获取用户的手机号码信息
    getPhoneNumber(e){
      console.log(e);
    },
    // 获取用户个人信息
    getUserInfo(e){
      console.log(e);
    },

9.8icon

图标。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

属性	类型	默认值	必填	说明	最低版本
type	string		是	icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear	1.0.0
size	number/string	23	否	icon的大小	1.0.0
color	string		否	icon的颜色，同css的color	1.0.0

 示例代码

9.9radio

单选项目。

属性	类型	默认值	必填	说明	最低版本
value	string		否	radio 标识。当该radio 选中时，radio-group 的 change 事件会携带radio的value	1.0.0
checked	boolean	false	否	当前是否选中	1.0.0
disabled	boolean	false	否	是否禁用	1.0.0
color	string	#09BB07	否	radio的颜色，同css的color	1.0.0

示例代码

  
男
女
  
  您选择的是：{{gender}}

Page({

  /**
   * 页面的初始数据
   */
  data: {
    gender:"",
  },handleChange(e){
    // console.log(e);
    // 1 获取单选框中的值
    let gender=e.detail.value;
    // 2 把值赋值给data中的数据
    this.setData({
      gender
    })

  }
})

9.10CheckBox 

多选项目。

属性	类型	默认值	必填	说明	最低版本
value	string		否	checkbox标识，选中时触发checkbox-group的 change 事件，并携带 checkbox 的 value	1.0.0
disabled	boolean	false	否	是否禁用	1.0.0
checked	boolean	false	否	当前是否选中，可用来设置默认选中	1.0.0
color	string	#09BB07	否	checkbox的颜色，同css的color	1.0.0

示例代码

  
    
      {{item.name}}
    
  
  
    选中的水果:{{ checkedList}}
  

Page({

  /**
   * 页面的初始数据
   */
  data: {
    list:[
      {
        id:0,
        name:"苹果",
        value:"apple"
      },
      {
        id:0,
        name:"草莓",
        value:"grape"
      },
      {
        id:0,
        name:"香蕉",
        value:"banana"
      },
    ],
    checkedList:[]
  },
  // 复选框的选中事件
  handleItemChange(e){
    // console.log(e);
    // 1 获取被选中的复选框的值
    const  checkedList=e.detail.value;
    // 2 进行复制
    this.setData({
      checkedList
    })
  }
})

10.自定义组件

10.1创建自定义组件

10.1.1新增组件

 首先在根目录下新建文件夹components，在components下新建Tabs文件夹，然后右击Tabs文件   夹选择【新建component】输入Tabs并回车,就创建了名为Tabs的组件

    

10.1.2声明组件  

那个页面要使用自定义组件，就在那个页面的JSON文件中声明

{
  "usingComponents": {
    "Tabs":"../../components/Tabs/Tabs"
  }
}

10.1.3使用组件 

 在wxml中写下即可

10.2 自定义组件--Tabs样式优化

  
    
    
    
      {{item.name}}
    
  
  内容

// components/Tabs/Tabs.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    tabs:[
      {
        id:0,
        name:"首页",
        isactive:true
      },
      {
        id:1,
        name:"原创",
        isactive:false
      },
      {
        id:2,
        name:"分类",
        isactive:false
      },
      {
        id:3,
        name:"关于",
        isactive:false
      },
    ]

  },
})

/* components/Tabs/Tabs.wxss */
.tabs_title{
  display: flex;
  padding: 10rpx 0;
}
.title_item{
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 激活选中效果 active */
.active{
  color: red;
  border-bottom: 5rpx solid currentcolor;
}

10.3 自定义组件--标题激活选中

// components/Tabs/Tabs.js
Component({
    /* 1 页面js文件中存放事件回调函数的时候，存放在data同层级下
     2 组件js文件中存放事件回调函数的时候，存放在methods中 */
  /**
   * 组件的方法列表
   */
  methods: {
    handleItemtap(e){     
      /* 
       1 绑定点击事件，需要在methods中绑定
       2 获取被点击的索引
       3 获取原数组
       4 对数组循环
         1.给每一个循环项选中属性改为false
         2.给当前的索引的项添加激活选中效果
       */
      // 2 获取索引
      // console.log(e);
      const {index}=e.currentTarget.dataset;
      // 3 获取data中的原数组
      //解构  对复杂类型进行解构的时候复制了一份变量的引用而已
      //最严谨的做法是重新拷贝一份，再对这个数组备份进行处理
      // let tabs=JSON.parse(JSON.stringify(this.data.tabs));  parse深拷贝
      //不要直接修改this.data.数据
      let {tabs}=this.data;
      // let {tabs}=this.data;相当于let tabs=this.data.tabs  tabs.forEach===this.data.tabs.forEach
      // 4 循环数组
      // [].forEach 遍历数组 遍历数组的时候修改了v(每一个循环项),也会导致原数组被修改了
      tabs.forEach((v,i)=>i===index?v.isactive=true:v.isactive=false);
      this.setData({
        tabs
      })

    }

  }
})

10.4 自定义组件--父向子传递数据 

 

 在父页面wxml中：

在父页面js中：

// pages/deom03/deom03.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tabs:[
      {
        id:0,
        name:"首页",
        isactive:true
      },
      {
        id:1,
        name:"原创",
        isactive:false
      },
      {
        id:2,
        name:"分类",
        isactive:false
      },
      {
        id:3,
        name:"关于",
        isactive:false
      },
    ]

  },

})

在子组件js中：

// components/Tabs/Tabs.js
Component({
  /**
   * 组件的属性列表
   * 里面存放的是要从父组件中接收的数据
   */
  properties: {
    // // 要接收的数据的名称
    // aaa:{
    //   // type 要接收的数据的类型
    //   type:"String",
    //   // value 默认值
    //   value:""
    // }
    tabs:{
      type:Array,
      value:[]
    }

  },
})

10.5 自定义组件--子向父传递数据 

 在子组件js中：

methods: {
    handleItemtap(e){     
      /* 
       1 绑定点击事件，需要在methods中绑定
       2 获取被点击的索引
       3 获取原数组
       4 对数组循环
         1.给每一个循环项选中属性改为false
         2.给当前的索引的项添加激活选中效果
       5 点击事件触发的时候
         触发父组件中的自定义事件同时传递数据给父组件
         this.triggerEvent("父组件自定义事件的名称"，要传递的参数)
       */
      // 2 获取索引
      // console.log(e);
      const {index}=e.currentTarget.dataset;
      // 5 触发父组件中的自定义事件同时传递数据给父组件
      this.triggerEvent("itemChange",{index});
      // // 3 获取data中的原数组
      // //解构  对复杂类型进行解构的时候复制了一份变量的引用而已
      // //最严谨的做法是重新拷贝一份，再对这个数组备份进行处理
      // // let tabs=JSON.parse(JSON.stringify(this.data.tabs));  parse深拷贝
      // //不要直接修改this.data.数据
      // let {tabs}=this.data;
      // // let {tabs}=this.data;相当于let tabs=this.data.tabs  tabs.forEach===this.data.tabs.forEach
      // // 4 循环数组
      // // [].forEach 遍历数组 遍历数组的时候修改了v(每一个循环项),也会导致原数组被修改了
      // tabs.forEach((v,i)=>i===index?v.isactive=true:v.isactive=false);
      // this.setData({
      //   tabs
      // })

    }

  }
})

在父页面wxml中：

在父页面js中：

// pages/deom03/deom03.js
Page({


  // 自定义事件，用来接收子组件传来的数据
  handleItemChange(e){
    // console.log(e);
    // 接收传递过来的参数
    const {index}=e.detail;
    console.log(index);
     // 3 获取data中的原数组
      let {tabs}=this.data;
      // 4 循环数组
      tabs.forEach((v,i)=>i===index?v.isactive=true:v.isactive=false);
      this.setData({
        tabs
      })
  }

})

10.6 自定义组件--slot

 

 在子组件中：

在父组件中：

  0
  1
  2
  3

10.7 组件的其他属性

定义段	类型	是否必填	描述	最低版本
properties	Object Map	否	组件的对外属性，是属性名到属性设置的映射表
data	Object	否	组件的内部数据，和 properties 一同用于组件的模板渲染
observers	Object	否	组件数据字段监听器，用于监听 properties 和 data 的变化，参见 数据监听器	2.6.1
methods	Object	否	组件的方法，包括事件响应函数和任意的自定义方法，关于事件响应函数的使用，参见 组件间通信与事件
behaviors	String Array	否	类似于mixins和traits的组件间代码复用机制，参见 behaviors
created	Function	否	组件生命周期函数-在组件实例刚刚被创建时执行，注意此时不能调用 setData )
attached	Function	否	组件生命周期函数-在组件实例进入页面节点树时执行)
ready	Function	否	组件生命周期函数-在组件布局完成后执行)
moved	Function	否	组件生命周期函数-在组件实例被移动到节点树另一个位置时执行)
detached	Function	否	组件生命周期函数-在组件实例被从页面节点树移除时执行)
relations	Object	否	组件间关系定义，参见 组件间关系
externalClasses	String Array	否	组件接受的外部样式类，参见 外部样式类
options	Object Map	否	一些选项（文档中介绍相关特性时会涉及具体的选项设置，这里暂不列举）
lifetimes	Object	否	组件生命周期声明对象，参见 组件生命周期	2.2.3
pageLifetimes	Object	否	组件所在页面的生命周期声明对象，参见 组件生命周期	2.2.3
definitionFilter	Function	否	定义段过滤器，用于自定义组件扩展，参见 自定义组件扩展	2.2.3

11.应用的生命周期

注册小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。

App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。

参数

Object object

属性	类型	默认值	必填	说明	最低版本
onLaunch	function		否	生命周期回调——监听小程序初始化。
onShow	function		否	生命周期回调——监听小程序启动或切前台。
onHide	function		否	生命周期回调——监听小程序切后台。
onError	function		否	错误监听函数。
onPageNotFound	function		否	页面不存在监听函数。	1.9.90
onUnhandledRejection	function		否	未处理的 Promise 拒绝事件监听函数。	2.10.0
onThemeChange	function		否	监听系统主题变化	2.11.0
其他	any		否	开发者可以添加任意的函数或数据变量到 Object 参数中，用 this 可以访问

// app.js
App({
   // 1 应用第一次启动就会触发的事件
  onLaunch() {   
    // 在应用第一次启动的时候获取用户的个人信息
    console.log("onLaunch");
  },
  // 2 应用被用户看到
  onShow(){
    // 对应用的数据或者页面效果重置
    console.log("onShow");
  },
  // 3 应用被隐藏了
  onHide(){
    // 暂停或者清除定时器
    console.log("onHide");
  },
  // 4 应用的代码生发了报错的时候就会触发
  onError(){
    // 在应用发生代码报错的时候收集用户的错误信息，通过异步请求将错误的信息发送到后台
    console.log("onError");
    console.log(err);
  },
  // 5 页面找不动就会触发
  // 应用第一次启动的时候如果找不到第一个入口页面才会触发
  onPageNotFound(){
    // 如果页面不存在了，通过js的方式来重新跳转页面，重新跳到第二个首页
    // 不能跳到tabbar页面
    wx.navigateTo({
      url: '/pages/deom01/deom01',
    })
    console.log(" onPageNotFound");
  }
})

12.页面的生命周期 

注册小程序中的一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。

参数

Object object

属性	类型	默认值	必填	说明
data	Object			页面的初始数据
options	Object			页面的组件选项，同 Component 构造器 中的 options ，需要基础库版本 2.10.1
onLoad	function			生命周期回调—监听页面加载
onShow	function			生命周期回调—监听页面显示
onReady	function			生命周期回调—监听页面初次渲染完成
onHide	function			生命周期回调—监听页面隐藏
onUnload	function			生命周期回调—监听页面卸载
onPullDownRefresh	function			监听用户下拉动作
onReachBottom	function			页面上拉触底事件的处理函数
onShareAppMessage	function			用户点击右上角转发
onShareTimeline	function			用户点击右上角转发到朋友圈
onAddToFavorites	function			用户点击右上角收藏
onPageScroll	function			页面滚动触发事件的处理函数
onResize	function			页面尺寸改变时触发，详见 响应显示区域变化
onTabItemTap	function			当前是 tab 页时，点击 tab 时触发
onSaveExitState	function			页面销毁前保留状态回调
其他	any			开发者可以添加任意的函数或数据到 Object 参数中，在页面的函数中用 this 可以访问

示例代码

// pages/deom04/deom04.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log("onLoad");
    // onLoad发送异步请求来初始化页面数据
  },

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

  },

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

  },

  /**
   * 生命周期函数--监听页面隐藏 可以通过隐藏应用和跳转页面实现
   */
  onHide: function () {
    console.log("onHide");

  },

  /**
   * 生命周期函数--监听页面卸载(关闭页面） 也是可以通过点击超链接来演示
   */
  onUnload: function () {
    console.log("onUnload");

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    console.log("onPullDownRefresh");
    // 页面数据或者效果重新刷新
  },

  /**
   * 页面上拉触底事件的处理函数 需要让页面上下滚动才行
   */
  onReachBottom: function () {
    console.log("onReachBottom");
    // 上拉加载下一页数据
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    console.log("onShareAppMessage");

  },

  /* *
   * 页面滚动触发事件的处理函数
   */
  onPageScroll: function () {
    console.log("onPageScroll");
    
  },
  /* *
   * 页面尺寸改变时触发 
   *  小程序发生了横屏竖屏切换的时候触发
   */
  onResize: function(){
    console.log("onResize");
  },
  /* *
   * 当前是 tab 页时，点击 tab 时触发 (点击自己的tab item才触发)
   */
  onTabItemTap: function(){
    console.log("onTabItemTap");
  }
})