微信小程序入门01

小程序入门微信，是一个生活方式

微信开放文档

移动端单位

iphone6   375*667(设备独立像素)

移动端适配

视口：

• 视觉视口（手机屏幕上窗口的大小）
• 布局视口（）
• 完美视口/理想视口（）

让布局视口=视觉视口大小，且缩放比为1

rem适配：屏幕大小变化页面内容也变化

1.代码实现

2.第三方库实现：

lib-flexible+px2rem-loader

小程序的特点

特点概述

1. 没有DOM
2. 组件化开发：具备特定功能的代码集合。
3. 体积很小，单个压缩包体积不能超过2M，否则无法上线。

小程序适配方案：rpx(响应式像素单位)

1. 小程序适配单位：rpx
2. 规定任何屏幕下宽度为750rpx
3. 小程序会根据屏幕的宽度不同自动计算rpx值的大小

举例：iphone6   375*667(设备独立像素)

750rpx   375px  得到:1px=2rpx

微信公众平台

获取APPID

新建项目流程

项目配置文件

project.config.json

sitemap.json

所有的文件都可以被索引

app.js

快捷键：App回车

注册整个小程序调用

app.json

app.wxss

公共样式

小程序搭建

静态页面的搭建

在ipone6模式下调适配，图片假如是100px*100px的,就写200rpx,这样调到其他手机模式下图片大小就会变成110px*110px这样的自适应了

小程序默认有page,里面元素flex布局，高度自适应，给背景色的时候不能全平铺，给page一个100%的高度就可以了。

把他放在全局公共样式里面写，注意：page是个标签不是class样式，前面没有点

wxml语法

双向数据绑定

修改数据this.setData() 

小程序里面修改数据是同步修改，this.setData()

       在非自身的钩子函数里面修改，如：setTimeout(()=>{})，数据也是同步的，但是页面上由 ‘初始化测试数据’ 两秒之后转变成了“修改后的数据”，控制台的数据不会因为延时改变。

总结

数据劫持代理

Vue数据劫持代理

模拟Vue中data选项

let data ={username:"curry",age:33}//模拟组件的实例let _this={}//利用Object.defineProperty()for(let item in data){console.log(item,data[item])}

console.log(item,data[item])

        千万不要在set方法中直接修改拓展属性的值，会出现死循环，set(){},比如下面：一修改 _this.username='wade'的时候调用set方法，然后把date中对应的属性赋值给newValue,最终的扩展属性依赖于get(){}里面的return data[item],数据就可以修改成功了。

Object.defineProperty(_this,item,{get(){},//get:用来获取扩展属性值的，当获取该属性值的时候调用get方法set(newValue){} //set:监视扩展属性的，只要已修改就调用}
)

要是让它大括号里面有值的话写：

let _this={test:'测试'
}

小程序事件绑定

事件分类事件 | 微信开放文档

1. 冒泡事件：当一个组件上的事件被触发后，改事件会向父节点传递。
2. 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

拓展内容：事件流

事件流的三个阶段：

• 捕获：从外向内（找到子元素的过程中都没有动外面的）
• 执行目标阶段
• 冒泡：从内向外

绑定事件

• bind绑定：事件绑定不会阻止冒泡事件向上冒泡

小程序bind绑定不会阻止冒泡事件向上冒泡

• catch绑定：事件绑定可以阻止冒泡事件向上冒泡绑定事件

  小程序catch绑定可以阻止冒泡事件向上冒泡
  

小程序路由跳转

小程序的全局对象是微信，没有window

浏览器的全局对象是window

• wx.navigateTo(Object object)

         触发 生命周期函数——监听页面隐藏

  onHide:function( ){console.log('onHide( ) 监听页面隐藏')}

       保留当前页面，跳转到应用内的某个页面，但是不能跳到tabbar页面，使用wx.navigateBack可以返回到原页面，小程序中页面栈最多十层。是用回调来通知success,fail,complete等结果，所以当前的行为是一个异步的行为。

        跳转时是一个相对路径，前面要加 /

• wx.redirectTo(Object object)

       关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到tabbar页面。

wx.reLaunch(Object object)

    关闭所有页面，打开到应用内的某个页面 也是，没有 <

    触发 生命周期函数——监听页面卸载

  onUnload:function( ){console.log('onUnload( ) 监听页面卸载')}

导航栏头标题navigationBarTitleText

到局部pages文件中的 .json文件中设置，navigationBarTitleText上面不用写window

小程序生命周期

生命周期 | 微信开放文档

页面初始化完之后——>向逻辑层要数据

顺序：onLoad和onReady只执行一次，比如：返回上一页，onLoad和onReady都执行过了，返回的时候就只执行了onShow

onLoad:function(options){} 监听页面加载  （之前this.setData()修改值也是在这里面弄的）

onShow:function(){}   监听页面显示 执行多次

onReady:function(){}   监听页面初次渲染完成

发请求：在onLoad和onReady(会晚一点，在页面全部加载完发请求)

小程序获取用户基本信息

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！