微信小程序

微信小程序

开发账号注册

注册地址:https://mp.weixin.qq.com/

注意:注册的账号一定要没有在微信这个平台使用过才行,即没有注册过公众号，订阅号，服务号，个人微信…

小程序首页:https://mp.weixin.qq.com/wxopen/initprofile?action=home&lang=zh_CN&token=673236200

开发者工具

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html

项目结构

pages文件夹下面每一个文件夹代表一个页面

每一个子文件夹中有三个文件,分别为逻辑层js文件,结构层wxml文件,样式层wxss文件

app.js:应用程序逻辑,项目的入口文件

app.json:应用程序配置,决定应用具备的功能外观

app.wxss:应用程序公共样式

页面结构

page-name.js:页面逻辑文件,用于创建页面对象,处理页面生命周期控制和数据处理,就是平时开发写JS功能的地方,该文件类似于Vue组件.vue文件中的srcipt部分

page-name.wxml:用于定义页面元素结构,使用XML语法,该文件类似于Vue组件.vue文件中的template部分

page-name.json:设置当前页面工作时window的配置,此文件配置会覆盖app.json中的window设置

page-name.wxss:用于定义页面样式,遵循CSS语法,扩展了CSS的长度单位(rpx响应式像素),该文件类似于Vue组件.vue文件中的style部分

小程序配置文件

页面配置文件优先于项目配置文件:也就是app.json中和page-name.json中都设置window同一个属性时,页面配置中的优先级高

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html

• pages:接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。

"pages":[
    "pages/demo/demo",
    "pages/index/index",
    "pages/logs/logs"
  ]

• window:用于设置小程序的状态栏、导航条、标题、窗口背景色。

 "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }

• tabbar:tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

"tabBar": {
    "color": "#c0c0c0",// 选项卡文字颜色
    "selectedColor": "#000", // 选项卡选择状态文字颜色
    "backgroundColor": "#f0f0f0",// tabbar背景颜色
    "borderStyle": "white", // tabbar边框颜色
    "list": [
      {
        "pagePath": "pages/index/index", // 选项卡页面路径
        "text": "home", // 选项卡文字
        "iconPath": "assets/home.png", // 选项卡图标
        "selectedIconPath": "assets/home-actived.png" // // 选项卡选中状态图标
      },
      {
        "pagePath": "pages/foo/bar",
        "text": "BAR",
        "iconPath": "assets/board.png",
        "selectedIconPath": "assets/board-actived.png"
      }
    ],
    "position": "bottom"
  }

应用生命周期

app.js文件作为整个应用的入口文件,内部定义管理应用运行状态的生命周期函数,一个应用在打开和关闭时都会触发相关生命周期函数

App({
  // 在整个应用启动时触发
  // 只会触发一次
  onLaunch: function (options) {
    console.log('应用启动了')
  },
  // 应用程序显示到屏幕上
  // 每次成为焦点状态都会触发
  onShow: function (options) {
    console.log('应用前台显示了')
    console.log(options)
  },
  // 应用切换到后台触发
  onHide: function () {
    console.log('隐藏到后台')
  },
  // onError 只能捕获到运行阶段的异常
  onError: function (msg) {
    console.log(msg)
  }
})

页面生命周期

一个微信小程序由多个页面组成,每一个页面的生成、销毁都会伴随着一系列函数执行,这些函数就是页面的生命周期函数

Page({
	
// 定义数据
  data: {
  
  },
// 页面开始加载(做数据初始化工作)
  onLoad: function (options) {
    // 获取全局唯一的应用程序实例对象
    const app = getApp()
    console.log(app.foo)
  },
// 页面渲染完毕(可以看到页面效果)
  onReady: function () {
  
  },

// 页面进入前台显示
  onShow: function () {
  
  },

// 页面进入后台
  onHide: function () {
  
  },

// 页面被销毁
  onUnload: function () {
  
  }
})

数据绑定

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/data.html

1. page-name.js中的必须写Page({}).
2. 数据定义在data对象中.
3. 使用{{}}显示数据

// js 文件
Page({
	data:{
		message:'hello world'
	}
})
	
// wxml 文件
<text>{{message}}<text>
	

行内脚本定义页面方法

<text>{{foo.sayHello()}}</text>

<wxs module='foo'>
	module.exports = {
		sayHello:function(){
			console.log('hello');
		}
	}
</wxs>

条件渲染

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/conditional.html

wx:if:类似于Vue中的v-if用法,用于显示隐藏元素

Page({
	data:{
		isLoading:true
	}
})

<view wx:if="{{isLoading}}">
  <text>loading...</text>
</view>
<!-- <view wx:elif=""></view> -->
<view wx:else>
  <text>load done</text>
</view>

循环渲染

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/list.html

wx:for:类似于Vue中的v-for,用法略有区别,用于循环渲染元素

wx:for默认使用的循环变量名叫item,默认使用的循环索引名叫index

wx:for-item = '字符串'可以指定循环使用的变量名

wx:for-index = '字符串'可以指定循环索引的变量名

wx:key:用于唯一标示每项元素

Page({
	data: {
    students: [
      { id: 1, name: 'zs', age: 18 },
      { id: 2, name: 'ls', age: 18 },
      { id: 3, name: 'ww', age: 18 },
      { id: 4, name: 'zl', age: 18 }
    ]
  }
})

<view>
  // 使用 wx:for-item 可以指定数组当前元素的变量名，
  // 使用 wx:for-index 可以指定数组当前下标的变量名
  <view wx:for="{{students}}" wx:key="id">
    <checkbox/>
    <text>{{item.name}}</text>
  </view>
</view>

事件处理

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html

Page({
	data:{},
	tabHandle(e){
		console.log(e);
		console.log(e.target.dataset.id);
	}
})
<button bindtap="tabHandle" data-id = '123'>点击</button>

// 注意: 使用catchtap 绑定的事件不会冒泡
// 可以使用data-xx 传递函数参数

单向数据流

数据源变化,通过this.setData()方式通知界面重新渲染

界面数据变化,需要通过valuechange事件通知数据源

Page({
	data:{
		name:'zs'
	},
	handelChange(e){
		// 更新数据
		this.setData({name:e.detail.value});
	}
})

<input value='{{name}}' bindinput='handelChange'></input>

API

https://mp.weixin.qq.com/debug/wxadoc/dev/api/