微信小程序| 简要学习

微信小程序简要学习

 

一、主目录结构

• app.js为外部全局主js，可以当作一个父类
• app.json为全局配置文件，以对象形式存在
• app.wxss为全局样式文件，公用

 

二、页面目录结构

• items.js为私有的js，相当于子类
• items.json为以json为对象形式存在的配置(每个页面都有page对象)
• items.wxml为元素渲染页面
• items.wxss为私有样式，私有样式可以覆盖公有(import导入)

 

三、程序页面加载

小程序默认加载pages中的第一个目录（第一行），如下文，加载index，其他页面需要通过触发加载

3.1 app.json

"pages":[
	"pages/index/index",
	"pages/index1/index1",
	"pages/index2/index2",
]

导航栏navigationBar跟底部切换栏tarbar配置，详情参考官网文档：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E9%A1%B5%E9%9D%A2%E9%85%8D%E7%BD%AE

3.2 app.json

  "window":{
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "第一个demo",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  },

3.3 app.json

  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/imooc/imooc",
      "text": "慕课网"
    }]
  },

以及网络请求以及debug一些配置

3.4 app.json

  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true,

 

四、小程序APP的生命周期

• onLaunch：第一次打开，初始化，只被调用一次
• onShow：第一次打开会随着onLaunch一起触发，当退到后台又切换回来，便会触发onShow
• onHide：例如点手机的home键小程序退到后台，便会触发onHide
• onError：当小程序出现错误，会在这里抛出并在此处理

4.1 app.js

App({
  onLaunch (options) {
    console.log("触发onLaunch")
  },
  onShow (options) {
    console.log("触发onShow")
  },
  onHide () {
    console.log()
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data',
  authorName: 'Derrick'
})

全局的app.js不允许注释，globalData与authorName为全局字符串，调用如下，参考官网给的例子https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html

4.2 test.js (页面目录结构)

page对象是一定要有的，如果没有页面则会空白

Page({
	data:{
		mytext:'My kinda wonderland'
	},
	onLoad:function(){
		const appInstance = getApp()
		console.log(appInstance.authorName);
		//获取到上面的data并设置值时，用setData
        this.setData({
        	mytext:appInstance.authorName
        });
	}
})

 

五、样式使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aZc4RgIU-1617001864573)(F:\博客\博客截图\微信小程序样式使用.JPG)]

5.1 一般引用情况

直接像往常html引用即可，其中container为app.wxss全局样式，txt-css为index.wxss私有样式，私有样式可以覆盖公有

5.1.1 index.wxss

.txt-css{
  margin-top:350rpx;
}

5.1.2 index.wxml

<view class="container">
<text class="txt-css">{{mytxt}}</text>
</view>

5.2 利用import

5.2.1 out.wxss

.txt-left{
  margin-left:350rpx;
}

5.2.2 index.wxss

利用import导入，然后添加相对路径，并以分号为结尾

@import "out.wxss";
.txt-css{
  margin-top:350rpx;
}

5.2.3 index.wxml

<view class="container">
<text class="txt-css txt-left">{{mytxt}}</text>
</view>

5.3 内联样式并有数据绑定，与vue类型

5.3.1 index.wxml

<view class="container">
<text class="txt-css txt-left" style="color:{{color}};">{{mytxt}}</text>
</view>

5.3.2 index.js

Page({
  data: {
    mytxt:'这是第一demo',
    color: "red"
  },
......

 

六、debug与调试

打断点，语句为debugger，代码如下，打开微信调试器，重新编译的时候就会出现如下图状况，按F10是单步往下继续走，按F8是直接跳到下一个断点，并且支持真机调试

App({
  onLaunch (options) {
    debugger;
    console.log("触发onLaunch")
  },
  onShow (options) {
    debugger;
    console.log("触发onShow")
  },
  onHide () {
    debugger;
    console.log()
  },
  onError (msg) {
    debugger;
    console.log(msg)
  },
  globalData: 'I am global data',
  authorName: 'Derrick'
})

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pp5II9zs-1617001864576)(F:\博客\博客截图\微信debugger.JPG)]

 

七、page生命周期以及跳转

第一次onLoad加载完便会触发onShow，当页面展示完毕之后再onReady

7.1 index.js

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

  },

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

  },

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

  },

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

  },

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

  },

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-otXodFIq-1617001864578)(F:\博客\博客截图\page生命周期1.JPG)]

接下来展示onHide与onUnload，先给标签绑定clickMe事件，代码如下：

7.2 index.wxml

利用bindtap绑定一个clikMe事件

<view class="container">
<text class="txt-css txt-left" style="color:{{color}};" bindtap="clickMe">{{mytxt}}</text>
</view>

7.3 index.js

在js中写出clickMe事件，跳转到imooc页面，其中的url填写相对路径，跳转后就会触发onHide生命周期函数，点击返回按钮就会再触发onShow生命周期函数，点击返回不会触发onLoad与onReady，因为它们只有在页面第一次加载的时候触发，除非页面被卸载

  clickMe:function(){
    wx.navigateTo({
      url: '../imooc/imooc',
    })
  }

7.4 index.js

将navigateTo改成redirectTo，这时候就会将页面重定向到下一个页面，便会触发onUnload生命周期函数，即卸载页面，这时候就会没有返回按钮

  clickMe:function(){
    wx.redirectTo({
      url: '../imooc/imooc',
    })
  }

 

八、事件

如第七中，我们其实可以对整个事件进行捕捉并进行打印，打印的log可参考官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

  clickMe:function(e){
    console.log(e)
  }

其中，我们可以自定义数据，利用data-XXXX，代码如下：

<view class="container">
<text class="txt-css txt-left" data-customName="derrick" bindtap="clickMe">{{mytxt}}</text>
</view>

在函数中可以获取到自定义数据，代码如下，但是要注意，customName已经被全部转换为小写，currentTarget.dataset.XXX

  clickMe:function(e){
    console.log(e);
    var name = e.currentTarget.dataset.customname;
    console.log(name);
  }

 

九、小程序模块化

把通用的方法抽离出来，作为通用函数，并构建再utils-common包中，供js类去调用，是业务共用化，官方文档https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/module.html

//传入name变量，打印的使用${变量}
function sayHello(name) {
  //也可使用单引号，字符串拼接的方式
  //console.log('Hello' + name + '!')
  console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
  console.log(`Goodbye ${name} !`)
}
//利用module.exports或者exports使得sayHello跟sayGoodbye暴露出去
module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye

//使用require将公共代码引入
var common = require('common.js')
Page({
  helloMINA: function() {
  //类似于java一样调用即可
    common.sayHello('MINA')
  },
  goodbyeMINA: function() {
    common.sayGoodbye('MINA')
  }
})

//注意路径问题，引入时需要在page对象之外
var common = require('../utils/common.js')
Page({
  data: {
    mytxt:'这是第一demo',
    color: "red"
  },
  clickMe:function(e){
    console.log(e);
    var name = e.currentTarget.dataset.customname;
    console.log(name);
    //调用
    common.sayHello("derrick");
  },

 

十、数据绑定

跟view类似，使用双大括号{{XXX}}

10.1 内容方面

<view>{{messgae}}</view>

page({
	data:{
		message:'Example'
	}
})

10.2 组件属性

可以方便动态地改变样式

<view id="item-{{id}}"></view>

page({
	data:{
		id:0
	}
})

10.3控制属性

用于条件判断，没有符合条件的内容不会渲染出来，如果用了hidden会渲染但不会显示

<view wx:if="{{condition}}"></view>
page({
	data:{
		condition:true
	}
})
//可以写更加复杂的判断
<view wx:if="{{age<18}}">未成年</view>
<view wx:elif="{{age>=18 && age<=30}}">已成年</view>
<view wx:else>你已经老了</view>

10.4 关键字

<checkbox checked="{{false}}"></checkbox>
//如果直接写checked="false"，结果会被认为是字符串

更多的可以在官网中看到…

 

十一、列表渲染

支持view，有换行；支持block，没有换行，标签不会打印出来，仅仅需要打印数据出来的时候可以选择block，为了不发生值偏移，可以使用wx:key来指定列表中项目的唯一的标识符，利用item某个property或者使用保留关键字*this

//为改名字
<view wx:for="{{user}}">
	下标：{{index}}，姓名：{{item.name}}
</view>
//将index和item换名字
<view wx:for="{{user}}" wx:for-index="num" wx:for-item="user">
	下标：{{num}}，姓名：{{user.name}}
</view>
page({
	data:{
		users:[
			{name:"Happy"},
			{name:"Birthday"}
		]
	}
})

 

十二、页面定义通用模板

12.1 template.wxml

• template代表定义模板，name设定模板名称，然后在里面写标签
• 使用模板时利用is=“XXX”说明使用哪个模板
• name跟age是在模板中定义的数据，使用模板时name:‘Derrick’,age:'18岁’传递参数
• 从js读取数据为对象时，使用…XXX，…代表将对象展开并把属性赋值到template
• 普通元素的话直接用属性名即可

<template name="mytemp">
  <view>姓名：{{name}}</view>
  <view>年龄：{{age}}</view>
  <view>专业：{{major}}</view>
  <view>地址：{{address}}</view>
  <view>信息：{{msg}}</view>
</template>

<view class="container">
  <template is="mytemp" data="{{...person,msg,name:'Derrick',age:'18岁'}}" />
</view>

12.2 template.js

Page({
  data: {
    person:{major:"软件工程",address:"广州"},
    msg:"Always happy baby"
  },
})

 

十三、WXS模块

JS代码块可以在页面中被引入使用，定义XXX.wxs文件，利用module.exports暴露接口和属性，利用wxs scr和module进行引入

13.1 module.wxs

定义属性name跟age，定义方法method函数，参数为obj，利用module.exports将他们公有化，然后将属性跟函数作为对象导出

var name="Derrick";
var age=18;
var method = function(obj){
  return obj
}

module.exports={
  name:name,
  age:age,
  method:method
}

13.2 wxs.wxml

src="…/wxs/module.wxs"引入，这里为相对路径，module="item"代表将该对象命名为item，利用对象.XX去调用

<view class="container">
  <wxs src="../wxs/module.wxs" module="item"></wxs>
  <view>{{item.name}}</view>
  <view>{{item.age}}</view>
  <view>{{item.method("This is object")}}</view>

  <view>{{item.name}}</view>
  <view>{{item.age}}</view>
  <view>{{item.method("This is object")}}</view>
</view>

13.3 module.wxs

当然，在.wxs模块中引用其他wxs文件模块，利用require函数

var module2 = require("../wxs/module2.wxs");

var name="Derrick";
var age=18;
var method = function(obj){
  console.log(module2.name)
  return obj
}
......

 

十四、模板外部引用

模板在某个wxml中定义完毕之后可以被其他页面所引用，关键字为import或include，但不可以间接引用，A引用B，B引用C，但A不能引用C

14.1 template.wxml

<template name="mytemp">
  <view>姓名：{{name}}</view>
  <view>年龄：{{age}}</view>
  <view>专业：{{major}}</view>
  <view>地址：{{address}}</view>
  <view>信息：{{msg}}</view>
</template>

14.2 wxs.wxml

<view class="container">
  <import src="../template/template.wxml"/>
  <template is="mytemp" data="{{name:'Derrick',age:'18岁'}}"></template>
</view>

而include是可以将整个wxml进行导入，例如header.wxml这个页面是很多地方都需要用到的，便可以导入，代码如下

14.3 wxs.wxml

<include src="../pageinclude/header.wxml">
<view>这是body页面</view>
......

可以间接引用，A引用B，B引用C，但A不能引用C

14.1 template.wxml

<template name="mytemp">
  <view>姓名：{{name}}</view>
  <view>年龄：{{age}}</view>
  <view>专业：{{major}}</view>
  <view>地址：{{address}}</view>
  <view>信息：{{msg}}</view>
</template>

14.2 wxs.wxml

<view class="container">
  <import src="../template/template.wxml"/>
  <template is="mytemp" data="{{name:'Derrick',age:'18岁'}}"></template>
</view>

而include是可以将整个wxml进行导入，例如header.wxml这个页面是很多地方都需要用到的，便可以导入，代码如下

14.3 wxs.wxml

<include src="../pageinclude/header.wxml">
<view>这是body页面</view>
......