微信小程序入门_wx.createanimation

小程序提供了一个简单、高效的应用开发框架和丰富的组件及API，帮助开发者在微信中开发具有原生 APP 体验的服务。

一、组件

1. text文本组件(类似HTML的span,示例代码如下)

<text>起飞</text>
1

2. view区域(类似HTML的div,示例代码如下)

<view>
	<text>view区域</text>
</view>
1
2
3

3. button按钮(同HTML按钮)

<button>按钮</button>
1

4. input文本框同HTML文本框

<input type="text" />
1

5. img图片

<image src="路径">图片</image>
1

6. 包含include

<!-- include 相当于拷贝,就是不拷贝template的内容 -->
<view class="title">include导入非template</view>
<include src="/template/test"></include>
1
2
3

7. 导入import

<view class="title">模板</view>
<import src="/template/test"/>
<template is="user" data="{{...userInfo}}"></template>
<template is="user" data="{{...userInfo2}}"></template>
1
2
3
4

二、模板语法

1. 文本渲染(示例代码如下)

var msg = "起飞"
<text>{{msg}}</text>
// 跟vue模板语法一样
1
2
3

2. 条件渲染(示例代码如下)

data:{
	score:10,
}
<view class="title">多重条件</view>
<view wx:if="{{score>100}}">波士顿龙虾</view>
<view wx:elif="{{score>50}}">小青龙</view>
<view wx:elif="{{score>30}}">小龙虾</view>
<view wx:else>泥鳅</view>
1
2
3
4
5
6
7
8

3. 列表渲染(示例代码如下)

data:{
	list:[
            "唱",
            "跳",
            "RAP",
            "篮球",
            "ji"
        ],
}
<view wx:for="{{list}}" wx:key="item">{{index}}----{{item}}</view>
1
2
3
4
5
6
7
8
9
10

4. 自定义列表渲染(示例代码如下)

data:{
	list:[
            "唱",
            "跳",
            "RAP",
            "篮球",
            "ji"
        ],
}
<view wx:for="{{list}}" wx:for-item="myitem" wx:for-index="myind" wx:key="myind">{{myind+1}}----{{myitem}}</view>
1
2
3
4
5
6
7
8
9
10

5. import(示例代码如下)

<import src="/template/test"/>
<template is="user" data="{{...userInfo}}"></template>
<template is="user" data="{{...userInfo2}}"></template>

// test.wxml文件
<template name="user">
    <view>name:{{name}}</view>
    <view>fly:{{int}}</view>
</template>
<view>
    你蜘蛛在上路,你在干什么
</view>
<view>
    我很气,接下来,一并超
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

6. include(示例代码如下)

//test代码
<template name="user">
    <view>name:{{name}}</view>
    <view>fly:{{int}}</view>
</template>
<view>
    你蜘蛛在上路,你在干什么
</view>
<view>
    我很气,接下来,一并超
</view>
<hr />
<view class="title">include导入非template</view>
<include src="/template/test"></include>
<view>import只能导入模板template ,include只能拷贝非template的内容</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

三、事件

• 事件是视图层到逻辑层的通讯方式。
• 事件可以将用户的行为反馈到逻辑层进行处理。
• 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
• 事件对象可以携带额外信息，如 id, dataset, touches。

部分事件示例代码如下

// size是大小,type是颜色,bindtap是事件
// bindtap事件
// js代码
tapHd(){
        wx.showToast({
          title: '我要起飞了',
        })
    },
showMsg(e){
        wx.showToast({
          title: e.target.dataset.msg,
        })
    },
<button size="mini" type="primary" bindtap="tapHd">按钮</button>
//事件传参
<button type="primary" bindtap="showMsg" data-msg="我出美甲的窃魂券了">按钮1</button>
<button type="warn" bindtap="showMsg" data-msg="从你身上窃取12层杀人书,我很气">按钮2</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

四、双向绑定

1. 表单的双向绑定(示例代码如下)

// js代码
changeMsg(e){
        console.log(e)
        this.setData({msg:e.detail.value})
    },
//wxml代码
<input 
 value="{{msg}}" 
 bindinput="changeMsg"
style="border: 1rpx solid red;padding: 15rpx;margin: 15rpx;" 
type="text"/>
<view>{{msg}}</view>
1
2
3
4
5
6
7
8
9
10
11
12

五、美妙清单实例(包括本地存储)

// wxml代码
<!--pages/todo/todo.wxml-->
<input 
style="border: 1px solid red; margin-top: 10px;" 
value="{{temp}}" 
bindconfirm="confirmHd" 
bindinput="inputHd"
 type="text"/>
<view class="list">
    <view wx:for="{{list}}" wx:key="title" class="item">
        <text>{{item.title}}</text>
        <text size="mini" type="warn" bindtap="delItem" data-item="{{item}}">x</text>
    </view>
</view>
// js代码
// pages/todo/todo.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        list:[]
    },
    // 实现删除
    delItem(e){
        console.log(e)
        var list = this.data.list
        // 查找下标
        var ind = list.findIndex(value=>value.title===e.target.dataset.item.title);
        // 删除list中ind个
        list.splice(ind,1);
        // 更新视图
        wx.setStorage({
            key:"list",
            data:this.data.list
        })
        this.setData({list})
    },
    confirmHd(){
        // 获取原来的list
        var list = this.data.list
        // 添加到最前面
        list.unshift({
            done:false,
            title:this.data.temp
        })
        // 更新list和temp
        wx.setStorage({
            key:"list",
            data:this.data.list
        })
        this.setData({list,temp:''})
    },
    // 更新temp
    inputHd(e){
        this.setData({
            temp:e.detail.value
        })
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        var arr=[];
        wx.getStorage({
            key: 'list',
            success(res) {
              console.log(res.data)
              arr=res.data;
            }
          })
        setTimeout(()=>{
            this.setData({list:arr});
            console.log(this.data.list)
        },10)
        // console.log(options)
    },
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

六、事件的传参

共有四种传参方式

1.路径传递

通过在url后面拼接参数，参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 ‘path?key=value&key2=value2’。
示例代码:

//A页面跳转代码

goB(){
    wx.navigateTo({
      url: '/pages/B/index?id=value',
    })
  },
//B页面接收代码

onLoad: function (options) {
	console.log('id', options.id)
}
1
2
3
4
5
6
7
8
9
10
11
12

2.全局变量

通过App.js全局对象存放全局变量。
示例代码如下:

//app.js代码
App({
 // 存放对象的全局变量
  globalData:{},
})
//A页面跳转代码
// 获取App对象
const app = getApp()
Page({
  /**
   * 页面的初始数据
   */
  data: {
    userInfo: {
      name: 'cym',
      age: 16
    }
  },

  goB() {
    app.globalData.userInfo = this.data.userInfo
    wx.navigateTo({
      url: '/pages/B/index',
    })
  },
})
//B页面接收代码
// 获取全局对象
 const app = getApp()
Page({

  onLoad: function (options) {
    console.log(app.globalData.userInfo)
  }
})
//存放在 App 全局变量里面，可以被多个页面使用，直接从 App 对象获取即可。这个数据是保持在内测中，每次小程序销毁就没有了。
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

七、wx的api

是wx内置的方法

弹出提示

示例代码:

wx.showToast({title:"",icon:})
1

网络请求工具

示例代码

wx.request()
1

停止下拉刷新

示例代码:

wx.stopPullDownRefresh()
1

本地存、取

示例代码:

wx.setStorageSync(key,value)
wx.getStorageSync(key)
1
2

八、wx的配置

全局配置

在app.json里面进行配置

页面配置

在index.json里面配置

//1.导航栏
"backgroundTextStyle": "light",
//背景文字颜色 light | dark
//2.导航栏
"navigationBarBackgroundColor": "#f70",
//背景颜色
//3.导航栏
"navigationBarTitleText": "小程序基础语法",
//导航栏表情
//4.导航栏
"navigationBarTextStyle": "white"
//导航栏+状态栏文字颜色  white | black
//5.页面
"enablePullDownRefresh": true,
//允许页面下拉刷新
//6.使用组件
"usingComponents": {"组件路径"}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

九、页面跳转

微信小程序的页面跳转分为组件跳转和js实现跳转

组件跳转

navigator:
path:跳转的页面
opentype:
//navigate 跳转,redirect 重定向（不理历史记录）,switchTab 切换底部栏,navigateBack 
1
2
3
4

JS实现跳转

wx.navigateTo //跳转
wx.switchTab //底部栏切换
wx.redirectTo //重定向
wx.navigateBack() //返回
1
2
3
4

十、小程序的页面栈

1. 小程序默认会缓存5个页面栈
2. A=>B=>C=>D=>E这5个页面都会缓存
3. navigate 添加一个缓存页面栈
4. navigateBack 移除一个页面栈
5. redirect 替换一个一个页面栈

十一、小程序的全局数据

1. 在app.js里定义

//定义全局数据
  globalData: {    
    num:5
  }
 //页面使用
 //获取app
const app = getApp(); 
//onShow中用全局数据更新本地数据
this.setData({count:app.globalData.num})
//更新时候要更新本地和全局
 addCount(){
    // 更新本地count
    this.setData({
      count:this.data.count+1
    })
    // 更新全局的num
    app.globalData.num +=1
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

十二、小程序的自定义组件

//步骤:
//01 创建一个组件
//02 在页面中注册组件
 "usingComponents": {
    "item":"/components/item/item"
  }
//03 在页面中使用组件
<item></item>
1
2
3
4
5
6
7
8

组件的构造函数

1. externalClasses外部类
2. properties:父组件传入的属性（参数）
3. data组件内部的数据
4. methods组件的方法

组件的传参（父传子）

//子组件接收
properies：{
   title:{type:String,value:''}
}
//子组件页面wxml使用
{{title}}
//子组件js的methods中使用
this.data.title
1
2
3
4
5
6
7
8

子传父

//子组件js
this.triggerEvent("toggle",{value:true})
//父组件。wxml
<item bind:toggle="toogleHd">
//父组件.js
toggleHd(e){
   //获取
    e.detial.value
}
1
2
3
4
5
6
7
8
9

外部类

//子组件.js
 externalClasses:[item-class]
//子组件.wxml 
<view class="item item-class">
//父组件wxml传入 
<item item-class="myItem">
//父组件.wxss
.myItem{ height:100rpx !important!;color:red;}
1
2
3
4
5
6
7
8

十三、小程序的获取

分享

//open-type来控制
<button open-type="share" class="btn">分享</button>
1
2

获取头像

<button class="mini-btn" bindtap="getProfile">获取信息</button>
getProfile(){
        var that = this;
        wx.getUserProfile({
          desc: '需要授权',
          success:function(res){
            console.log(res);
            // 存储在本地用户信息
            wx.setStorageSync('userInfo', res.userInfo)
            // 更新到data里面
            that.setData({userInfo:res.userInfo});
            // that.login();
          }
        })
      },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

登录

getUserProfile只能获取到用户的头像和昵称，不能作为唯一标识符合与后端进行交互,
01
wx.login() 获取code
把code发送给自己服务器（也可以加userInfo）
02 
自己的服务器向微信服务器发送code+appid+AppSecret 
换取唯一标识符 openid
03 
通过openid可以实现登录，注册，权限等功能
1
2
3
4
5
6
7
8
9

监听滚动

1. onPageScroll

回到顶部/固定位置

  wx.pageScrollTo({
      duration: 500, //时间
      scrollTop:0, //位置
    })
 wx.pageScrollTo({
      duration: 500,
      selector:".share"       
    })
1
2
3
4
5
6
7
8

获取设置/窗口信息

wx.getSystemInfoSync();
1

获取电量

wx.getBatteryInfoSync();
1

打电话/发短信

 wx.makePhoneCall({
      phoneNumber: '13598859747',
    })
1
2
3

下载网络图片（权限）

wx.downloadFile()
wx.saveImageToPhotosAlbum()
保存到相册
1
2
3

上传图片

 wx.chooseMedia({
      count:1})

 wx.uploadFile({
          filePath: res.tempFiles[0].tempFilePath
})
1
2
3
4
5
6

设置标题

 wx.setNavigationBarTitle({
          title: '自定义组件',
        })
1
2
3

十四、小程序的分包

小程序的限制打包上传每个每个包不超过2M
总大小16M,本地存储 每次 1M，总大小10 /0M
底部栏2-5个
页面栈5个
所以进行分包
打开小程序 默认只下载主包
小程序的打开速度加快
通过分包可以让项目更加庞大

//分包
"subpackages": [
    {
      "root": "news",
      "pages": [
        "pages/detail/detail"
      ]
    }
  ],
// 分包预加载
"preloadRule": {
    "pages/jok/jok": {
      "network": "all",
      "packages": [
        "news"
      ]
    }
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

十五、小程序的云开发

概念

1. 云数据库（moogoDB）
2. 云函数（nodejs）
3. 云存储

作用：

1. 让前端脱离后端直接链接数据库和存储
2. 写好nodejs ,根据一定的规则操作业务数据，链接数据库,在把nodejs上传到云端
3. 在客户端调用nodejs对应的方法，获取服务器数据

云函数定义

1. config配置
2. package.json 包管理
3. js逻辑

//01 导入wx 的sdk 初始化云
const cloud = require('wx-server-sdk')
cloud.init()
//02 导入数据库
const db = cloud.database();
//03 导出
exports.main = async (event, context) => {
    const wxContext = cloud.getWXContext()
   //当前微信的环境
  // event 调用函数传入的参数
  return  {} 返回的数据
})
//云函数写好要上传到服务器
1
2
3
4
5
6
7
8
9
10
11
12
13

调用云函数

wx.cloud.callFunction({name:"addMsg",data:{}})
.then()
.catch()
name云函数的名称，
data 传入的参数
1
2
3
4
5

数据库操作

查

1. db.collection(“guest”).get()
2. skip() 跳过
3. orderby(“date”,“desc”) 日期从大到小
4. limit ()限制
5. .count() 查询总数

增

1. db.collection(“guest”).add({data:{}})
   // data是添加的数据

删除

1. db.collection(“guest”).doc(event.id).remove()

云文件的操作

wx.cloud.uploadFile({})
//cloudPath 文件名（存储到服务器的）
//path 本地缓存文件
//success成功  res.fileID文件地址
wx.chooseMedia({})
	count:9,//最多选择数量
 //res.tempFiles[i].tempFilePath
1
2
3
4
5
6
7