简介

微信小程序（wei xin xiao cheng xu），简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是无需安装，用完即走，实际上是需要安装的，只不过小程序的体积特别小，下载速度很快，用户感觉不到下载的过程 )
2017年1月9日0点，万众瞩目的微信第一批小程序正式低调上线
小程序刚发布的时候要求压缩包的体积不能大于1M,，否则无法通过，在2017年4月做了改进，由原来的1M提升到2M

移动端

物理像素

屏幕的分辨率
设备能控制显示的最小单元，可以把物理像素看成是对应的像素点

设备独立像素 css像素

设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用并控制的虚拟像素(比如：CSS 像素,只是在android机中CSS 像素就不叫”CSS 像素”了而是叫”设备独立像素”)，然后由相关系统转换为物理像素。

dpr比 & DPI & PPI

dpr: 设备像素比，物理像素/设备独立像素 = dpr，一般以Iphon的dpr为准 dpr = 2
PPI: 一英寸显示屏上的像素点个数
DPI：最早指的是打印机在单位面积上打印的墨点数，墨点越多越清晰

适配方案

viewport适配方案

为什么做viewport适配
a) 手机厂商在生产手机的时候大部分手机默认页面宽度为980px
b) 手机实际视口宽度都要小于980px，如: iphone6为375px
c) 开发需求：需要将980的页面完全显示在手机屏幕上且没有滚动条

实现：

        initial-scale   =   设备独立像素宽/布局视口宽   =   0.5initial-scale和width=device-width结果冲突时,谁的布局视口大就按谁的来iphone 6 设备独立像素宽->375

<meta name="viewport" content="width=device-width,initial-scale=1.0">

rem适配

rem适配前提:实现理想视口
为什么做rem适配
a) 机型太多，不同的机型屏幕大小不一样
b) 需求：一套设计稿的内容在不同的机型上呈现的效果一致，根据屏幕大小不同的变化，页面中的内容也相应变化

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><meta name="viewport" content="width=device-width"><style>*{margin:0;padding:0;}img{/* width:50%; *//* width:50vw;height:50vw; *//* 375(设计稿)/remSize */width:375rem;height:375rem;/* vw和vh   100vw=屏幕宽度 100vh=屏幕高度*//* width:187px;height:187px; */}</style>
</head>
<body><div style="width:200px;"><img src="./1.jpg" alt="" srcset=""></div><script>// rem适配前提:实现理想视口var width = document.documentElement.clientWidth;var remSize = width/750;document.documentElement.style.fontSize=remSize+"px";console.log(width)</script>
</body>
</html>

视网膜屏

视网膜屏幕是分辨率超过人眼识别极限的高分辨率屏幕，由苹果公司在2010年在iPhone 4发布会上首次推出营销术语。
Iphone4的dpr = 2; 人类肉眼分辨的极限
问题： Iphone6的dpr为多少？Iphone6Plus比Iphone显示图像清晰吗？

小程序

特点

没有DOM(ECMA) --> 小程序中没有BOM,BOM由各大浏览器厂商自己制定,自己提供的
组件化开发
体积小,单个压缩包体积不能大于2M,否则无法上线

四个重要文件

*.js
*.wxml --> view结构 --> html
*.wxss --> view样式 --> css
*.json --> view数据 --> json文件

小程序适配方案

rpx (responsive pixel响应式像素单位)

小程序适配单位:rpx
规定屏幕宽度为:750px
c) Iphone6下： 1rpx = 1物理像素 = 0.5css

小程序配置

app.json

作用:用于为整个应用进行选项设置

页面名称.json

作用:用于为指定的页面进行配置
页面配置的优先级高于全局配置

sitemap.json

作用:用于被微信搜索爬取页面

小程序框架接口

App

全局app.js中执行App()
生成当前应用的实例对象
getApp()获取全局应用实例

wxml语法

数据绑定

WXML 中的动态数据均来自对应 Page 的 data

初始化数据

Page({/*** 页面的初始数据*/data: {msg:111},

使用数据
模板解构中使用双大括号{{message}}
注意:小程序中为单向数据流model–>view

1.   this.setData({message: ‘修改之后的数据’}, callback)

特点：
a) 同步修改： this.data值被同步修改
b) 异步更新：异步将setData 函数用于将数据从逻辑层发送到视图层（异步）

总结对比

 /*** 生命周期函数--监听页面加载*/onLoad: function (options) {/*数据流Vue 单向双向数据绑定  v-model原理(input或change)显示初始值  :value="msg"当用户修改input的值时,同时将用户输入的结果赋值给data@input="(event)=>{this.msg=event.target.value}"React 单向小程序 单向双向数据绑定->有->但是不好用*//*获取Vue this.msg->数据代理  ->msg属性具有get方法,返回this.$data.msgReact this.state.msg->没有数据代理小程序  this.data.msg->没有数据代理修改Vue this.msg=234->数据代理 ->msg属性具有set方法,会设置给this.$data.msg  ->数据劫持,当$data中的数据发生变化,会触发dep.notify()Vue的最小更新单位->组件(能做到如此精准的原因是因为每个组件都有dep和watcher的关系,还有每个data属性的set方法)React this.state.msg=234(不行的) this.setState({msg:234})(可行)   持久化存储React的最小更新单位->App(不精准的原因,因为没有数据劫持)面试题:setState更新state的效果是同步还是异步?答:某些情况是同步更新,某些情况是异步更新异步更新(将更新的效果延后,多次更新合并成一次):1.生命周期(生命周期结束之后,才会执行所有的更新)2.合成事件同步更新:1.原生事件2.定时器面试题:如何区分合成事件和原生事件<div onClick={handleClick}>123</div><div οnclick={handleClick}>123</div>box.onmousemove合成事件(捡来的):驼峰命名法实现原理:将所有的事件都绑定在document上,实现事件委派原生事件(亲儿子):全小写小程序(状态持久化)this.data.msg=234(不可行)this.setData({msg:234})*/this.setData({msg:234})

事件绑定

官网介绍
事件分为冒泡事件和非冒泡事件：

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

bind绑定：

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

catch

绑定: 事件绑定可以阻止冒泡事件向上冒泡

  <!-- <button>欢迎光临</button> --><!-- 绑定事件,会冒泡,都会触发 --><!-- <view bindtap="handleTap2"><button bindtap="handleTap">欢迎光临</button></view> --><!-- 不会冒泡 只会触发2--><!-- <view bindtap="handleTap"><button catchtap="handleTap2">凯的渡口</button></view> --><view capture-catch:tap="handleTap"><button capture-bind:tap="handleTap2">凯的渡口</button></view>

条件判断

  <image wx:if="{{userInfo.avatarUrl}}" src="{{userInfo.avatarUrl}}" class="welcome"></image><button wx:else open-type="getUserInfo" bindgetuserinfo="handleUserLogin" class="welcome">Login</button>

列表渲染

 <scroll-view class="scroll-container" enable-flex scroll-x><view class="scroll-item" wx:for="{{recommendList}}" wx:key="id"><image src="{{item.picUrl}}"></image><text>{{item.name}}</text></view></scroll-view>

改名

    <scroll-view class="scroll-container" enable-flex scroll-x><view class="scroll-item" wx:for="{{recommendList}}" wx:key="id" wx:for-item="rolls"><image src="{{rolls.picUrl}}"></image><text>{{rolls.name}}</text></view></scroll-view>

小程序API

小程序提供了很多实用的方法供开发者使用
小程序全局对象是: wx
所有的API都保存在wx对象中

路由跳转

url可以写相对路径,也可以写绝对路径,但是相对路径要注意,他的基础路径是当前js文件所在文件夹
wx.navigateTo保留当前页面,具体说是保留当前页面实例,不会被重新挂载,相当于keep-alive

  wx.navigateTo对应的生命周期:初次显示阶段:1.onLoad2.onShow3.onReady离开阶段:onHidewx.redirectTo对应的生命周期:初次显示阶段:1.onLoad2.onShow3.onReady离开阶段:onUnLoad

wx.redirectTo关闭当前页面,具体说就是卸载当前实例

// 绝对路径
wx.navigateTo({url: "/pages/center/index"
}) // 绝对路径wx.navigateTo({url: "../center/index"})

wx.getUserInfo() 二次登录

二次登录
官网

 /* 二次登录验证 */wx.getUserInfo({success: (userData) => {// console.log(userData)this.setData({userInfo: userData.userInfo})}})

组件生命周期

页面生命周期图

  /*** 生命周期函数--监听页面加载*/onLoad: function (options) {console.log("----- onLoad -----")    },/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {console.log("----- onReady -----")},/*** 生命周期函数--监听页面显示*/onShow: function () {console.log("----- onShow -----")},/*** 生命周期函数--监听页面隐藏*/onHide: function () {console.log("----- onHide -----")    },/*** 生命周期函数--监听页面卸载*/onUnload: function () {console.log("----- onUnload -----")    },

问题解决

http://localhost:3000

请求

1.必须填写完整的地址

TypeError: Cannot read property ‘mark‘ of undefined

换行

.recommendSrcoll .scrollItem view{/* 单行文本溢出隐藏,显示省略号 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;*/height:80rpx;display:-webkit-box;/* 文本行排列方向 */-webkit-box-orient:vertical;/* 设置几行之后出现溢出省略号 */-webkit-line-clamp:2;overflow:hidden;
}

开启BFC的方法
1.overflow不为默认值
2.display:inline-block/table/table-ceil
3.float不为默认值
4.绝对定位或者固定定位
5.根元素html

逻辑

用户首次登录

1.实现授权弹窗 -> 组件button,添加标签属性open-type=“getUserInfo”
2.监听用户操作,接受用户数据
监听用户操作->绑定事件->事件名称:getuserinfo
获取用户数据->通过形参->event.detail内部
3.动态渲染
将数据放入data中,并在页面上使用插值语法显示

用户二次登录免密授权

在onLoad中,使用wx.getUserInfo方法,检测用户是否已经授权过
如果已经授权,可以通过success得到用户信息

封装util

export default function(url, data = {}, method = "GET") {return new Promise((resolve, reject) => {wx.request({url: "http://wangkai.zone:xxxx" + url,data,method,success: (res) => {resolve(res.data)}})})
}// 有的时候async await并不是那么适用,因为我没有必要等待其他代码执行完毕 所有then方法实用ajax("/banner", {type: 2}).then((res) => {this.setData({slideshowList: res.banners})})

优化请求方式

 // 优化代码let reqNum = [15, 20, 21, 22]let index = 0;let toList = [];while (index < reqNum.length) {ajax("/top/list", {idx: reqNum[index++]}).then((res) => {toList.push({name: res.playlist.name,tracks: res.playlist.tracks})this.setData({rankingList: toList})})}

下拉动画效果

  data: {touchMove: "",transitionName: ""},handleTouch(event) {// console.log("handleTouch", event)this.startY = event.touches[0].clientY// console.log(event.touches[0].clientY)},handleTouchMove(event) {// console.log("handleTouchMove", event)// console.log(event.touches[0].clientY)let transfrom = Math.floor(event.touches[0].clientY - this.startY)if (transfrom < 0 || transfrom > 80) return;this.setData({touchMove: transfrom})// console.log(transfrom)},handleTouchEnd() {this.setData({touchMove: "",transitionName: "transform,400ms"})},

  <view class="cover-container" bindtouchstart="handleTouch" bindtouchmove="handleTouchMove" style="transform:translateY({{touchMove}}px);transition:{{transitionName}}" bindtouchend="handleTouchEnd">

event.currentTarget

  重点:区分到底是哪个组件触发的change实现:通过标签属性配合event中的target或者currentTarget实现传参

  data: {phone: "",password: ""},handlePhone(event) {console.log("handlePhone", event)this.setData({phone: event.detail.value})},handlePassword(event) {console.log("handlePassword", event)this.setData({password: event.detail.value})},handleLogin(event) {// console.log(event)let type = event.currentTarget.dataset.type;let value = event.detail.value;// console.log(type, value)this.setData({[type]: value})

微信小程序开发(原生)相关推荐

微信小程序开发原生与框架对比
1.为什么使用框架 (1) 原生微信小程序工程化差.不支持node (2) 原生微信小程序语法比较奇怪还需要我们学习新的一套语法. (3) 微信小程序的开发者工具开发体验较差. (4) 使用框架可以使 ...
微信小程序原生开发功能合集一：微信小程序开发介绍
一.专栏介绍本专栏主要内容为微信小程序常用功能开发过程的介绍说明,包括开发微信小程序常用组件的封装.常用功能的开发等,提供源代码.开发过程讲解视频.完整的课程等. 组件封装: 下拉选择组件. ...
原生微信小程序开发-黑马优购（一）
接口文档地址: 轮播图--ShowDoc 视频地址: 黑马程序员微信小程序开发前端教程_零基础玩转微信小程序_哔哩哔哩_bilibili 后面也许可以通过快速搭建mock来获取数据(这个工作肯定要会) ...
与张小龙同行：微信小程序开发
与张小龙同行:微信小程序开发概要基于微信小程序轻快的特点,我们拟定了小程序界面设计指南和建议. 设计指南建立在充分尊重用户知情权与操作权的基础之上.旨在微信生态体系内,建立友好.高效.一致的用户体 ...
微信小程序开发之路（一）
今天来为大家讲讲微信小程序,大概讲一下在开发小程序时需要注意的几个点.在开始之前先了解下微信小程序是个什么东西吧. 微信小程序(weixinxiaochengxu),简称小程序,缩写XCX,英文名mi ...
微信小程序开发系列五：微信小程序中如何响应用户输入事件
微信小程序开发系列教程微信小程序开发系列一:微信小程序的申请和开发环境的搭建微信小程序开发系列二:微信小程序的视图设计微信小程序开发系列三:微信小程序的调试方法微信小程序开发系列四:微信小程序 ...
微信小程序开发系列二：微信小程序的视图设计
大家如果跟着我第一篇文章微信小程序开发系列一:微信小程序的申请和开发环境的搭建一起动手,那么微信小程序的开发环境一定搭好了.效果就是能把该小程序的体验版以二维码的方式发送给其他朋友使用. 这个系列 ...
input ios问题小程序_微信小程序开发常见问题汇总
原标题:微信小程序开发常见问题汇总 1.域名必须是https 非https的域名不被微信小程序允许. 2.input组件placeholder字体颜色卸载placeholder-class里面的co ...
详解微信小程序开发（项目从零开始）
关注公众号风色年代(itfantasycc) 280G前端&小程序资料随便拿! 详解微信小程序开发(项目从零开始) 一.序微信小程序,估计大家都不陌生,现在应用场景特别多.今天就系统的介绍 ...
c++小程序代码_# 微信小程序的原生框架和taro对比 ##
微信小程序的原生框架和taro对比小程序历史(为什么会出现?) 2007年 iPhone H5 大家知道现在手机端主要是iOS.Android两大系统,实际上在早期有3大系统竞争,还有一个就是诺基亚 ...

微信小程序开发(原生)

简介

移动端