Wx小程序开发-创新互联

微信小程序开发文档：https://www.w3cschool.cn/weixinapp/sp6z1q8q.html

创新互联公司是一家集网站建设,津市企业网站建设,津市品牌网站建设,网站定制,津市网站建设报价,网络营销,网络优化,津市网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

微信小程序前端源码逻辑和工作流：https://www.cnblogs.com/dupd/p/5905880.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首字母要大写        

https://jingyan.baidu.com/article/6f2f55a1656e01b5b93e6c9e.html

//跨页面传值

https://www.ifanr.com/minapp/878030

四、组件样式

https://www.cnblogs.com/yang-shuai/p/6899430.html

1.CSS选择器

1）标签选择器

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

3）派生选择器  （标签的子级标签的样式）

4） id选择器  （不针对具体的标签）

#选择器名{}

5） id选择器结合派生选择器

6） 类选择器

.选择器名{}

7）属性选择器

[属性名]{}

8)  属性和值选择器

[属性名=属性值]{}

   [属性名~=属性值]{}          //属性包含属性值

   [属性名｜=属性值]{}          //属性包含属性值的另一种表现形式

标签名[] {}                        //具体标签的属性选择器

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

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

2）类选择器可以合并

也就是说class可以等于多个class的列表
   对于id来讲 id="div1" 而不能写成id = "div1 div2"这样，即只能有一个id，而不是像class属性那样

  如何关联样式表：

@import "other.wxss";

2.布局   

Flex布局：https://blog.csdn.net/qq_26585943/article/details/79694792

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

布局实战：https://blog.csdn.net/aoaoxiexie/article/details/53991432

五、网络请求

https://blog.csdn.net/suixufeng/article/details/65445751

 

六、蓝牙操作

https://www.cnblogs.com/qcloud1001/p/7717860.html

https://www.jianshu.com/p/1fc23fc7e5ce

七、变量

1) let与var定义变量的区别：https://www.jianshu.com/p/e62d4ee72a61

 2)变量定义

    数组定义  变量名:[]

对象定义  变量名:{}

 3)变量赋值

https://blog.csdn.net/weixin_41991473/article/details/79927418

赋值异常："Setting data field "content" to undefined is invalid" 错误，原因是赋值的值与变量的类型不一致。

七-2、方法

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

var api = require("../demo/api_test/api_test.js");

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

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

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

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

直接调用会报错：

你要调用的自己的自定义方法 not defined;at api callback function

如：

        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就正常。

   

八、数组

 合并清空数组  https://www.jianshu.com/p/cd08d01a1c9c

增删改查    https://www.jb51.net/article/102160.htm

push和concat的区别：

https://blog.csdn.net/wangsf789/article/details/53466314

ArrayBuffer与Java数据类型

  http://www.majianwei.com/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对象的属性异常

  Cannot read property 'sendResultListener' of undefined

九、列表组件

https://www.cnblogs.com/yexiaochai/p/9431816.html

https://blog.csdn.net/qq_38614249/article/details/80913311

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

https://blog.csdn.net/qq_41999617/article/details/83449841

十：关键字

1）this和that：http://www.php.cn/xiaochengxu-353027.html

https://blog.csdn.net/lucky123star/article/details/77508360

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

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

十一：工具类封装

  1）  http://www.wxapp-union.com/forum.php?mod=viewthread&tid=2461

2）  模块化：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/module.html （官方）

     

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

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

3）定义监听回调

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

形式2：监听对象为一个对象 {},然后调用对象的相关函数。

https://www.cnblogs.com/bellagao/p/6305485.html

 4）wxml中使用自定义的函数：https://blog.csdn.net/qq_35971258/article/details/85197664

 5）base64与arraybuffer互转：https://www.hishop.com.cn/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与字符串互转

https://blog.csdn.net/xyzdwf/article/details/82220987

2.进制转换

https://blog.csdn.net/sinat_22038331/article/details/85861708

注意16进制转10进制时，调用parseInt函数，但是传入的参数必须是以"0x"开头的。否则会出现问题，如传入1A，结果计算为1.

十四:异步处理

https://blog.csdn.net/txqd1989/article/details/79096598/

十五：下载

https://blog.csdn.net/csl125/article/details/79206525

十六：音频

• 关于播放进度获取的问题

  小程序的innerAudioContext的onTimeUpdate事件返回值为undefined

十七：Wifi

• wx.getWifiList报错(没有声明权限) https://blog.csdn.net/weixin_43282511/article/details/89881143

#######第3方库：############

1.protobuf协议

https://blog.csdn.net/d7185540/article/details/85105758

 上面的方法可以把proto转换成json，但是下面如何使用？？？

2.https://blog.csdn.net/zuochao_2013/article/details/54563993 （各种框架和源码）

1. 微信小程序之绑定点击事件

2. https://blog.csdn.net/yanglei0917/article/details/70171921

3. 吐司

   https://blog.csdn.net/hedong_77/article/details/54948537

  微信小程序给wx.showToast 更换图标 icon 种类

http://www.pianshen.com/article/7528213664/

1. 调试

   console.log(res)，在开发工具上扫描“远程调试”按钮生成的二维码，即可在console里看见日志 。

2. 罗盘Demo

   https://cloud.tencent.com/developer/article/1367259

另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

分享标题：Wx小程序开发-创新互联
网站路径：http://dzwzjz.com/article/dcjccj.html