微信小程序开发学习笔记

[TOC]

目录结构

miniprogram
- app.js  整个项目可用的js代码
- app.json  整个项目的配置（在这里指定小程序的页面）
- sitemap.json  搜索优化
- statics  静态资源文件夹，用来放图片等
- pages  页面文件夹
	- index 一个文件夹对应一个页面
		- index.js    单个页面的js代码
		- index.json  单个页面的配置
		- index.wxml  微信用的类似html代码
		- index.wxss  微信用的类似css代码
	- page2
	- page3

Wxml

• <view>：类似html中的<div>
• <image>：类似html中的<img>
• <text>：类似html中的<span>
• <button>：一个按钮
• rpx：微信中用来代替px像素的单位

Wxss

建议使用flex布局：Flex 布局示例 (vgee.cn)

数据绑定

在wxml代码中写双大括号代表是变量：{{message}}，然后在这一页的js代码中的data字典中添加对应的键（如message: "value"）。

若要在js代码中获取变量值，则this.data.message即可；若要改变变量值，不能直接赋值，要this.setData({ message: "newvalue" });。

假如message是一个字典：message={a: 50, b: "apple"}，要改动apple为banana，使用this.setData({ ["message.b"]: "banana" })。即假如key比较复杂，那就用方括号和引号括起来。

同上，假如不在乎性能，也可以先把旧的message保存在变量里，然后改动这个变量，再setData整个字典。

事件

假如要在text标签中绑定一个点击事件，则在wxml标签中写：<text bindtap="func_name" data-id=123>点我</text>。其中，data-id是参数，会以id作为名字给到func_name函数中，调用形式是e.currentTarget.dataset.id。

JavaScript闭包

for (var i in ["alex", "bob", "charley"]){
    // js中每一轮i是索引
    wx.request({
        url: "xxxx",
        success: function(res){
			console.log(i);  // 此处有bug
        }
    })
}

如图，我们想用wx.request在每一轮发起一次请求，假如成功就输出索引。然而，wx.request是一个异步请求，发生在循环结束之后，而结束后变量i的值会变成2，所以这个代码结果会输出三个2。

解决方法就是对变量进行闭包，即把i变成局部变量：

for (var i in ["alex", "bob", "charley"]){
    // js中每一轮i是索引
    function func(data){
     	wx.request({
            url: "xxxx",
            success: function(res){console.log(i);}
        })   
    }
    func(i);
}
// 或者使用更简洁的语法
for (var i in ["alex", "bob", "charley"]){
    (function(data){wx.request(...)})(i)
}

微信的一些函数

wx.navigateTo

跳转到不是tab_bar的页面。

// 跳转
wx.navigateTo({
    url: '/pages/redirect/redirect',
})

wx.getUserProfile

获取用户信息。wx.getUserProfile(Object object) | 微信开放文档 (qq.com)

var home = this;
wx.getUserProfile({
    success: function(res){
        console.log(res.userInfo);
        home.setData({ user_id: res.userInfo.nickName,
                      user_avator: res.userInfo.avatarUrl})
    },
    fail: function(res){
    	console.log("获取用户信息失败", res);
    },
    desc: "测试使用"
})

登陆

• openId：针对一个小程序的每一个用户都不同的ID。一个用户对于不同小程序会有不同的id。
• session_key：这个用户和你的session的密钥，可能在一定时间后过期（不能在wx中用），这个过期时间也可以开发者自己再定一个。