微信小程序整理

目录

  1. 开发环境

  2. 目录结构

  3. WXML组件

  4. WXSS

  5. 数据绑定

  6. 条件渲染

  7. 列表渲染

  8. 模版

  9. 事件

  10. 引用

  11. 路由传参

  12. API

  13. 实例TodoList

1.开发环境

开发工具下载（https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html） 
安装之后，和微信web开发者工具一样，扫码登录即可，不同的是，创建一个小程序需要填写AppID，如果没有AppID的话，点击‘无AppID’即可 

2.目录结构

一个小程序由两部分组成：框架主体部分、框架页面部分

框架主体部分

框架主体部分包含三个文件，位于项目的根目录 
1) app.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
//app.js//app.js
App({
  onLaunch: function () {
    // 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
    // 调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  onShow: function() {
      // 当小程序启动，或从后台进入前台显示，会触发 onShow
  },
  onHide: function() {
      // 当小程序从前台进入后台，会触发 onHide
  },
  getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  globalData:{
    userInfo:null
  }
})

app.js内调用了App函数（只能在app.js内调用）注册小程序实例，可以在这个文件中监听处理小程序的声明周期函数，并可以在此声明全局变量。 
小程序提供了全局方法getApp返回小程序实例

var app = getApp()
console.log(app.globalData) // {userInfo:null}

此外，还提供了getCurrentPage方法获取当前页面的实例，getCurrentPage不能在onLaunch中调用，此时page尚未生成

2）app.json

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "list": [{
      "pagePath": "page/index/index",
      "text": "首页"
    }, {
      "pagePath": "page/logs/logs",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

此文件用来对小程序进行全局配置（app.json不得含有注释）

  • pages 配置页面路由，所有需要使用的页面都需要添加配置

  • window 设置页面窗口表现

  • tabBar 设置页面底部tab表现，其中list数组长度不超过5且至少为2

  • networkTimeout 设置网络超时时间

  • debug 设置debug模式的开启

3）app.wxss样式表

复制代码
/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}
复制代码
框架页面部分

框架页面部分包含四个文件 
 
page.js，page.json分别对应于app.js和app.json，不同之处在于page.js中调用的是Page函数，page.json中只能对本页的window进行配置，因此，page.json中直接就是一个对象

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

然后再看看page.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// page.js
Page({
  data: {
   // 页面的初始数据
    text: "This is page data."
  },
  onLoad: function(options) {
    // 页面加载时
  },
  onReady: function() {
    // 页面渲染完成时
  },
  onShow: function() {
    // 页面显示时
  },
  onHide: function() {
    // 页面隐藏时
  },
  onUnload: function() {
    // 页面卸载时
  },
  // 自定义属性，使用this方法
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    })
  }
})

3.WXML组件

小程序中并没有html标签，而是提供了一系列WXML组件

  • view 视图容器

  • scroll-view 可滚动视图容器

  • swiper 滑块视图容器

  • icon 图标

  • text text

  • progress progress

  • button button

  • checkbox-group 多项选择器，内部由多个checkbox组成

  • checkbox 多选项目

  • form form

  • input input

  • label label

  • picker 滚动选择器，现支持三种选择器，通过mode来区分，分别是普通选择器，时间选择器，日期选择器，默认是普通选择器

  • radio-group 单项选择器，内部由多个

    组成

  • radio 单选项目

  • slider 滑动选择器

  • switch 开关选择器

  • action-sheet action-sheet

  • modal 模态弹窗

  • toast 消息提示框

  • loading 加载提示符

  • navigator 页面链接

  • audio audio

  • image image

  • video 视频

  • map 地图

  • canvas 画布

这应该是类似于ng中的组件，目前小程序并没有提供自定义组件的功能

4.WXSS

WXSS用于描述WXML的样式表 
为了适应各种屏幕，WXSS扩展了尺寸单位rpx（responsive pixel），规定屏幕宽度为750rpx（20rem） 
另外，WXSS并不支持所有css选择器，目前支持的选择器有

  • .class

  • #id

  • element

  • element,element

  • :after

  • :before

5.数据绑定

数据绑定采用 “Mustache” 语法（双大括号）包裹变量

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!--index.wxml-->
<view class="container">
  <text>{{hello}}</text>
</view>
  
//index.js//index.js
Page({
  data: {
    hello: 'Hello World'
  },
  onLoad: function () {
    this.setData({
      hello:'Hello World'
    })
  }
})

WXML 中的动态数据均来自对应 Page 的 data，并且需要调用setData方法通知视图数据变化

6.条件渲染

使用 wx:if=”{{condition}}” 来判断是否需要渲染该代码块，同大多MV*框架一样，if是惰性的，即初始判断为false时，不会渲染该代码块

?
1
<view wx:if="{{condition}}"> True </view>

7.列表渲染

使用wx:for绑定一个数组，wx:for-index可以指定数组当前下标的变量名（默认为index），wx:for-item可以指定数组当前元素的变量名（默认为item）

?
1
2
3
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

8.模版

使用name属性定义一个 stemplate 模版，模版拥有自己的作用域

?
1
2
3
4
5
6
<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

使用name属性使用一个 stemplate 模版，data属性传入模版所需的数据

< template is="msgItem" data="{{...item}}"></template >

data

?
1
2
3
4
5
6
7
8
9
Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

9.事件

支持事件

  • touchstart 手指触摸

  • touchmove 手指触摸后移动

  • touchcancel 手指触摸动作被打断，如来电提醒，弹窗

  • touchend 手指触摸动作结束

  • tap 手指触摸后离开

  • longtap 手指触摸后，超过350ms再离开

事件绑定

以key-value形式绑定事件 
其中key为 bind 或 catch +事件名称，例如bindtap=“tapName”（bind不阻止冒泡，catch阻止事件向上冒泡） 
value为函数名称

事件对象

  • type 事件类型

  • timeStamp 事件生成时的时间戳

  • target 触发事件的组件的一些属性值集合 id、dataset、offsetLeft,、offsetTop

  • currentTarget 当前组件的一些属性值集合 id、dataset、offsetLeft,、offsetTop

  • touches 触摸事件，触摸点信息的数组 pageX、pageY、clientX、clientY、screenX、screenY

  • detail 特殊事件所携带的数据，如表单组件的提交事件会携带用户的输入

10.引用

WXML 提供两种文件引用方式import和include 
import可以在该文件中使用目标文件定义的template，但不能使用目标文件中import的其他template

?
1
2
3
// index.wxml
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

 include可以将目标文件中除了

?
1
2
3
4
5
6
7
8
9
10
<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
  
<!-- header.wxml -->
<view> header </view>
  
<!-- footer.wxml -->
<view> footer </view>

11.路由传参

一个url如下

?
1
<navigator url="navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>

在目标页的声明周期函数onLoad中传入options即可获取路由参数对象，另外url是相对的，不是app.json中定义的url

?
1
2
3
4
5
6
7
Page({
  onLoad: function(options) {
    this.setData({
      title: options.title
    })
  }
})

12. API

框架提供丰富的微信原生API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等，具体可查看官方文档

13.TodoList

最后是一个案例

  • 显示任务

  • 添加任务

  • 删除任务

  • 标记任务是否完成

  • 计算任务总数和已完成的任务数量 

index.wxml
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!--index.wxml-->
<view class="input">
  <input bindinput="bindKeyInput" placeholder="请输入任务名称" value="{{inputValue}}"/>
  <button bindtap="add">确定</button>
</view>
<view class="list">
  <block wx:for="{{list}}">
    <view>
      <checkbox-group bindchange="change" data-index="{{index}}">
        <checkbox value="{{item.checked}}"checked="{{item.checked}}" />
      </checkbox-group>
      <text>{{item.value}}</text><button bindtap="delete" data-index="{{index}}">删除</button>
    </view>
  </block>
  <view>
    {{complete}}个已完成/{{list.length}}个任务
  </view>
</view>

其中block并不属于组件，不会在页面中渲染，仅作接收控制属性用

index. wxss
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/**index.wxss**/
.input {
    padding: 20 rpx
}
.list view {
    padding: 10 rpx 20 rpx;
    overflow: hidden
}
.list view text {
    display: inline - block;
    line - height: 92 rpx
}
.list view button {
    width: 200 rpx;
    display: inline - block;
    float: right
}
index.js
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
//index.js
Page({
  data: {
    list:[],
    complete:0
  },
  bindKeyInput:function(e){
    this.setData({
      inputValue:e.detail.value
    })
  },
  add:function(){
    var list = this.data.list;
    list.push({checked:false,value:this.data.inputValue});
    this.setData({
      list:list,
      inputValue:''
    })
  },
  delete:function(e){
    var list = this.data.list;
    list.splice(e.target.dataset.index,1)
    this.setData({
      list:list
    })
    this.com_task()
  },
  change:function(e){
    console.log(e.detail.value[0])
    var list = this.data.list;
    list[e.target.dataset.index].checked = !!e.detail.value[0]
    this.setData({
      list:list
    })
    this.com_task()
  },
  com_task:function(){
    var complete = 0,list = this.data.list;
    for(var i=0,len=list.length;i<len;i++){
      console.log(list[i].checked)
      if(list[i].checked!=false){
        complete++
      }
    }
    this.setData({
      complete:complete
    })
  }
})

 

list为任务列表，complete为已完成的任务数量

页面展示效果如下

 

 

 源码：

        链接: https://pan.baidu.com/s/1mjrzHva 密码: aikb

 

posted @   小旭的blog  阅读(762)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
点击右上角即可分享
微信分享提示
SQL AI 助手