wx小程序知识点（五）

五.双向绑定和 vue 的区别 ① vue 中实现双向绑定只需要修改 this.data var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } } }) ② 小程序中需要…

wx小程序知识点（三）

三.封装小程序的数据请求 (1)在根目录创建utils目录,创建config.js.base.js (2)在config.js中创建config类,并将请求路径配置给config的属性restUrl,并export class Config { constructor () {} } Config.restUrl = 'http://***.cn/api/v1/' export { Config } (3)在base.js中引入config,把url赋值给base的属性 import { Con…

wx小程序知识点（二）

二.WXML和HTML的异同.WXSS和CSS的异同 (1)WXML和HTML 相同点:都是用来描述页面结构的,由标签.属性组成不同点:标签名不一样,小程序标签名更少: 小程序多了 wx:if 这样的属性和 {{}} 的表达式: 小程序只能在微信开发者工具中预览,而HTML可以在浏览器中预览: 小程序对组件进行了重新封装: 小程序运行在 JS Core 内,没有DOM树和window对象,无法使用window对象和document对象 (2)WXSS和CSS 相同点:都是用来描述页面的样式不…

wx小程序知识点（八）

八.小程序的优劣势优势: ① 不需要下载 ② 打开速度快 ③ 开发成本低 ④ 安卓上可以添加在桌面,与原生 App 相似 ⑤ 小程序的发布审查流程比较严格,安全保障劣势: ① 页面大小不能超过1M,不能打开超过5个层级的页面 ② 部分组件样式不可修改 ③ 推广面窄,只能分享给朋友,不能分享到朋友圈, ④ 依赖微信的后台,无法开发后台管理功能…

wx小程序知识点（七）

七.小程序提速与性能优化参考大佬vicyao的文章 https://blog.csdn.net/wetest_tencent/article/details/61196522 (1)提高页面加载速度在页面加载时预加载下一个页面的数据 (2)用户行为预测根据数据分析,进入首页的用户通常会点击第二个页卡,因此提前将第二个页卡的数据存入缓存中 (3)减少默认data的大小打开一个新页面时微信会深拷贝一个page对象,因此,应该尽量减少默认data的大小,以及减少对象内的自定义属性. (4)组件…

wx小程序知识点（六）

六.生命周期 (1)onLoad —— 加载时触发,只调用一次,可用来发送请求绑定数据.获取url中参数 (2)onShow —— 页面显示时触发,每次显示都会执行,用来获取需要频繁更新的数据,比如购物车.订单.地址等 (3)onReady —— 渲染完时触发,只调用一次 (4)onHide —— 隐藏页面时触发,如底部tab切换到别的页面或小程序切入后台等 (5)onUnload —— 页面卸载时触发,如redirectTo 或 navigateBack 到其他页面…

wx小程序知识点（一）

一.微信小程序中的目录及文件 (1)project.config.json 用于开发者工具配置主要用于设置项目是否开启https校验(setting.urlCheck) (2) App.js 设置全局基础数据(记录日志.微信登录.获取用户信息) (3)App.json 底部tab(tabbar.list).标题栏(window).路由(pages) (4)App.wxss 公共样式(引入iconfont.container等) (5)pages目录包含每一个具体的页面目录 (6)index目…

wx小程序知识点（四）

四.页面间数据传递和参数传值 (1)页面间数据传递 ① 全局变量 ② 页面跳转或重定向时使用url携带参数(wx.navigateTo(urlStr)) ③ 使用组件模板 template <template is="products" data="{{products: productsArr}}"></template> ④ 存入缓存 wx.setStorageSync(key, data) wx.getStorageSync(key…

wx小程序获取用户位置信息

wx小程序内置的接口只能获取用户的坐标,通过微信位置服务获取用户地址: http://lbs.qq.com/qqmap_wx_jssdk/index.html 注:需要在key的设置中打开webService并设置,小程序的合法域名(当前小程序的服务器域名)为允许ip…

wx小程序初体验

小程序最近太火,不过相比较刚发布时,已经有点热度散去的感觉,不过这不影响我们对小程序的热情,开发之前建议通读下官网文档,附链接:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=201716 接下来,我们要实现的小程序效果如下,源码地址:https://github.com/caiya/weapp-ywgo: 1.注册打开微信公众平台,单击"小程序",按步骤开始注册即可,附地址:https://mp.weixin.qq.com/cgi-bin/…

微信小程序笔记<五> 页面管理及生命周期（route）——getCurrentPages()

在小程序中所有页面的路由全部由框架进行管理,而框架以栈的形式维护了当前的所有页面. 当发生路由切换时,页面栈的表现: getCurrentPages() 用于获取当前页面栈的实例,可以把 getCurrentPages() 看做当前小程序所有页面的集合.该集合的第一个元素为首页,最后一个元素为当前页. ps:不要尝试修改页面栈,会导致路由以及页面状态错误. // index/index.js ================================ Page({ data:{"id&qu…

C#开发微信小程序（五）

导航:C#开发微信小程序系列关于小程序项目结构,框架介绍,组件说明等,请查看微信小程序官方文档,关于以下贴出来的代码部分我只是截取了一些片段,方便说明问题,如果需要查看完整源代码,可以在我的项目库中下载: https://dev.tencent.com/u/dwBurning/p/ReallyWantToApi/git https://git.dev.tencent.com/dwBurning/LazyOrders.git 又是一个周末,九月已过半,学生们都开学了,公司招聘的应届生也分配到部门…

微信小程序知识点梳理

小程序介绍 17年一月9号,小程序刚发布的时候,个人很幸运的成为第一批吃螃蟹的人,当然也是第一批采坑的人. 小程序是基于微信的一种应用,使用微信自定义的组件,让我们使用JavaScript的方式,达到匹配原生应用的效果.小程序的一大优势就是,你只要有个微信,你就能搜索你所需要的点餐.买票.旅游等一些日常需求的小程序,而且——用完即毁.无需下载. 小程序开发所需要的技能小程序是最适合前端开发人员,你所需的知识仅仅是JavaScript.css.html的基本知识,如果你有其他单页面应用的开发经验…

爬取WX小程序的数据

方法一: 使用TBS工具,调试跟踪获取URL https://x5.tencent.com/tbs/guide/debug/download.html https://x5.tencent.com/tbs/guide/debug/season1.html 方法二: 下载小程序的包,反编译,查看代码或者用微信开发者工具调试跟踪 1.node.js运行环境如果没有安装nodejs,请先安装一下下载地址:https://nodejs.org/en/ 2.反编译的脚本这里提供一个Github上qw…

wx小程序使用字体

1.下载项目下的字体库 2.解压复制iconfont.css中的代码到,小程序 app.wxss 3.使用: //icon-begindate表示开始时间的图标 <text class="iconfont icon-begindate">{{begindate}}</text> 4.在线: 生成在线链接后,替换 app.wxss中的 @font-face…

wx小程序获取组件属性数据data-prop

在微信小程序中有时会在组件上定义一些属性,使用data-来定义 <view data-idvalue="id" data-Index-Name="IndexName" data-IndexText="IndexName" data-indexValue="indexValue" bindtap='viewClick' >我要获取组件的data-属性名的值</view> viewClick: functi…

wx小程序的学习

传送门: # 微信小程序案例大全 https://www.cnblogs.com/icyhoo/p/6282574.html # 微信小程序开发工具 https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html # 内置组件 https://mp.weixin.qq.com/debug/wxadoc/dev/component/ # 微信内置API https://mp.weixin.qq.com/debug/wxadoc/de…

wx 小程序开发---开发者工具使用

1:右侧详情界面合法域名都要在需要在小程序平台配置合法域名这样你的小程序请求的网址才能通. 1.2如果自己的域名没有配置https 可以勾选为不校验合法域名即可 (小程序官方规定网址必须是Https).…

wx小程序笔记

目录 p18 事件绑定1 p19 事件绑定2 btn p20+ view 相关,wxss,less,css 零基础玩转微信小程序[黑马程序员] https://www.bilibili.com/video/av73342655 p18 事件绑定1 p19 事件绑定2 btn p20+ view 相关,wxss,less,css…

微信小程序（五）

JavaScript: JavaScript 是一种轻量的,解释型的,面对对象的头等函数语言,是一种动态的基于原型和多范式的脚本语言,支持面向对象,命令式和函数式的编程风格. Nodejs 中的JavaScript ECMAScript Native NPM 小程序的JavaScript ECMAScript 小程序框架小程序API 浏览器的JavaScript ECMAScript DOM BOM ECMAScript 语法类型语句关键字操作符对象平台: IOS JavaScri…

微信小程序知识点汇总

微信小程序常用标签与HTML的对应关系 <div></div> <view></view> <h1></h1>...<h6></h6> <p></p><span></span> <view></view> <i class="icon"> <icon></icon> <iput…

微信小程序（五）利用模板动态加载数据

利用模板动态加载数据,其实是对上一节静态数据替换成动态数据:…

家庭记账本之微信小程序（五）

wxml的学习 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 用以下一些简单的例子来看看WXML具有什么能力: 数据绑定  <view> {{message}} </view> // page.js Page({ data: { message: 'Hello MINA!' } }) 列表渲染  <view wx:for-it…

wx小程序用canvas生成图片流程与注意事项

1.需要画入canvas的图片都需要先缓存到本地 let ps = [] ps.push(that.loadImageFun(this.statusInfo.avatar_url, "headImg")) Promise.all(ps).then(res => { // 画图 }) loadImageFun(url, index) { let _this = this return new Promise((resolve, reject) => { wx.downloa…

wx小程序功能总结

注:1. 微信默认的宽度为750rpx , 不会变化. 2.bindtap 绑定触摸事件,可冒泡 catchtap 绑定触摸事件,不可冒泡 1.唤出系统菜单 2.上传图片 showSelection(sizeType,count){ let _this = this; wx.showActionSheet({ itemList: ['拍照片', '我的相册'], success(e) { switch (e.tapIndex) { case 0: { wx.chooseImage({ count…