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,传入参数,可能会提示:
如:
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 (各种框架和源码)
微信小程序之绑定点击事件
https://blog.csdn.net/yanglei0917/article/details/70171921
吐司
https://blog.csdn.net/hedong_77/article/details/54948537
微信小程序给wx.showToast 更换图标 icon 种类
http://www.pianshen.com/article/7528213664/
调试
console.log(res),在开发工具上扫描“远程调试”按钮生成的二维码,即可在console里看见日志 。
罗盘Demo
https://cloud.tencent.com/developer/article/1367259
另外有需要云服务器可以了解下创新互联cdcxhl.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网页名称:Wx小程序开发-创新互联
文章起源:http://azwzsj.com/article/dcjccj.html