【移动应用开发技术】Wx小程序开发

【移动应用开发技术】Wx小程序开发

微信小程序开发文档：/weixinapp/sp6z1q8q.html小程序官方示例Demo一、小程序的生命周期

1.小程序启动

小程序启动之后，在

app.js

定义的

App

实例的

onLaunch

回调会被执行:

整个小程序只有一个App实例，是全部页面共享的，App实例相当于

android里的application。

2.渲染界面

微信客户端首先会根据page.json生成一个界面

接着客户端就会装载这个页面的

WXML

结构和

WXSS

样式。最后客户端会装载

logs.js

在渲染完界面之后，页面实例就会收到一个

onLoad

的回调(page.js)，你可以在这个回调处理你的逻辑。

二、绑定View的点击事件

通过bindtap='methodName'，在js里实现点击事件

方法实现方式1

//

methodName:function(e){

//

}

方法实现方式2

methodName(){

wx.navigateTo({

url:

'../net/net',

})

}

三、页面跳转添加新页面注意js文件里的page首字母要大写

/article/6f2f55a1656e01b5b93e6c9e.html

//跨页面传值

/minapp/878030

四、组件样式

/yang-shuai/p/6899430.html

1.CSS选择器

1）标签选择器

2）选择器分组（共享声明）

3）派生选择器

（标签的子级标签的样式）

4）

id选择器

（不针对具体的标签）

#选择器名{}

5）

id选择器结合派生选择器

6）类选择器

.选择器名{}

7）属性选择器

[属性名]{}

8)

属性和值选择器

[属性名=属性值]{}

[属性名~=属性值]{}

//属性包含属性值

[属性名｜=属性值]{}

//属性包含属性值的另一种表现形式

标签名[]{}

//具体标签的属性选择器

id选择器与类选择器的区别：

1）id选择器一个wxml中只能出现一次，但是class可以多次。

2）类选择器可以合并

<divclass="class1class2class2"></div>也就是说class可以等于多个class的列表

对于id来讲id="div1"而不能写成id="div1div2"这样，即只能有一个id，而不是像class属性那样

如何关联样式表：

@import"other.wxss";

2.布局

Flex布局：/qq_26585943/article/details/79694792

所有的View都是一个Flex，可以设置作为父容器的属性或作为子容器的属性。

布局实战：/aoaoxiexie/article/details/53991432

五、网络请求

/suixufeng/article/details/65445751

六、蓝牙操作

/qcloud1001/p/7717860.html

/p/1fc23fc7e5ce

七、变量

1)let与var定义变量的区别：/p/e62d4ee72a61

2)变量定义

数组定义

变量名:[]

对象定义

变量名:{}

3)变量赋值

/weixin_41991473/article/details/79927418

赋值异常："Settingdatafield"content"toundefinedisinvalid"错误，原因是赋值的值与变量的类型不一致。

七-2、方法

1）当前js调用另外js的方法

varapi=require("../demo/api_test/api_test.js");

调用api即可获取api_test.js里定义的方法，但是api_test.js的方法先要声明暴露出来。

2）当前js调用当前js的方法

this.方法名(),直接使用方法名会报方法找不到。

3）wx.xx方法的callback里调用自定义的方法

直接调用会报错：

你要调用的自己的自定义方法

notdefined;atapicallbackfunction

如：

Page({

data:

{

},

getConnectedDevices(){

console.log('getConnectedDevices

start')

wx.getConnectedBluetoothDevices({

services:

[],

success:

function(res)

{

console.log('getConnectedDevices

success',res)

},

fail:function(res){

console.log('getConnectedDevices

fail',

res)

}

})

},

initAdapter(){

var

that

=

this;

console.log('initAdapter

start')

wx.openBluetoothAdapter({

success:

function(res)

{

console.log('initAdapter

succes',

res)

that.getConnectedDevices();

},

fail:function(res){

console.log('initAdapter

fail',res)

}

})

},

｝

）

上面，initAdapter方法里，如果直接调用getConnectedDevices就会报错。但是用that在initAdaper方法赋值一下this再调用getConnectedDevices就正常。

八、数组

合并清空数组

/p/cd08d01a1c9c

增删改查

/article/102160.htm

push和concat的区别：

/wangsf789/article/details/53466314

ArrayBuffer与Java数据类型

/archives/6420

其实微信小程序与Java程序通讯，如果遇到了ArrayBuffer类型，JS可以将ArrayBuffer转换成HexString类型，Java再将HexString转byte[]（也就是ArrayBuffer）。

八-1：对象

1.错误的赋值方法：

对象内部无法引用自身的属性smallFrame.push({

"ST":

"33",

"SN":

codetool.num2Hex(sn,1)

,

"CTL":

calCTL(sendDataArray.length

-

1

-

i,

i

==

0

?

1

:

0),

"LEN":

codetool.num2Hex(sendDataArray[i].length

/

2,1),

"DATA":

sendDataArray[i],

"BCC":

codetool.yihuo(this.SN

+

this.CTL

+

this.LEN

+

this.DATA),

"FRAME":

(this.ST

+

this.SN

+

this.CTL

+

this.LEN

+

this.DATA

+

this.BCC)

});

正确的赋值方法：for

(let

i

=0;i

<

sendDataArray.length;i++){

let

item

=

{

"ST":

"33",

"SN":

codetool.num2Hex(sn,

1),

"CTL":

calCTL(sendDataArray.length

-

1

-

i,

i

==

0

?

1

:

0),

"LEN":

codetool.num2Hex(sendDataArray[i].length

/

2,

1),

"DATA":

sendDataArray[i],

"BCC":

"",

"FRAME":

""

};

item.BCC

=

codetool.yihuo(item.SN

+

item.CTL

+

item.LEN

+

item.DATA);

item.FRAME

=

item.ST

+

item.SN

+

item.CTL

+

item.LEN

+

item.DATA

+

item.BCC;

2.读取一个undefined对象的属性异常

Cannotreadproperty'sendResultListener'ofundefined

九、列表组件

/yexiaochai/p/9431816.html

/qq_38614249/article/details/80913311

点击事件，通过自定义属性传值：

/qq_41999617/article/details/83449841

十：关键字

1）this和that：/xiaochengxu-353027.html

/lucky123star/article/details/77508360

在嵌套的方法里，一般不直接使用this。可以定义一个that=this，然后调用that。

2）在自定义的js里使用varthat=this，然后调用that会提示undefined?????

十一：工具类封装

1）

/forum.php?mod=viewthread&tid=2461

2）

模块化：/miniprogram/dev/framework/app-service/module.html

（官方）

变量如何暴露：定义方法返回变量，然后暴露方法。

注意js只能暴露方法，无法直接暴露变量，但是可以通过方法返回变量。

3）定义监听回调

形式1：监听对象为一个函数function

形式2：监听对象为一个对象

{},然后调用对象的相关函数。

/bellagao/p/6305485.html

4）wxml中使用自定义的函数：/qq_35971258/article/details/85197664

5）base64与arraybuffer互转：/xiaocx/show_48059.html

6）十二、微信小程序特殊语法：

1、KV传参：

wx的某些api，传入参数，可能会提示：

如：

wx.getBLEDeviceCharacteristics({

deviceId,

serviceId:

blecofig.getBleServiceId(),

success(res)

{

console.log('device

getBLEDeviceCharacteristics:',

res.characteristics)

}

})

getBLEDeviceCharacteristics的第二个参数

serviceId，如果参数的类型不明确，就要用KV形式传入参数。

十三：编码

1.ArrayBuffer与字符串互转

/xyzdwf/article/details/82220987

2.进制转换

/sinat_22038331/article/details/85861708