赞
踩
官方文档:微信开放文档
微信小程序,简称小程序,英文名 MiniProgram,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念,对于用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载。对于开发者而言,小程序开发门槛相对较低,难度不及APP,能够满足简单的基础应用。 --- 轻应用
小程序的主要开发语言是 JavaScript ,小程序的开发同普通的网页开发相比有很大的相似性。对于前端开发者而言,从网页开发迁移到小程序的开发成本并不高,但是二者还是有些许区别的。
整个小程序框架系统分为两部分:逻辑层 和 视图层。小程序提供了自己的视图层描述语言 WXML 和 WXSS,以及基于JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑。只需要在逻辑层更改数据,视图层内容就会相应更新。mina=>微信小程序官方框架(主流开发框架)
官网: 微信公众平台
微信小程序允许个人开发者申请账号,申请成功后才能进行下一步的学习和开发。
点击进入后,一定选择 【小程序】进行注册账号。
申请成功后,使用刚刚注册的邮箱账号和密码进入到微信小程序官方控制平台中。
进入微信小程序官方控制平台后,主要为了得到开发所要用到的appid和secret这两项值。
3.1、下载与安装
官方开发工具下载地址:稳定版 Stable Build | 微信开放文档
开发微信程序必须要安装官方的开发工具,此工具不但是编写代码所用的工作,还是开发编译小程序在电脑上能看到代码运行效果的模拟器,所以一定要安装。
每家的开发工具都要下载,因为要用他们看效果
3.2、helloworld项目
创建项目时,一定保证能上网
在同一个局域网下, 就能用手机调试了
小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:
文件 | 必填 | 作用 |
app.js | 是 | 小程序逻辑-小程序入口文件 |
app.json | 是 | 小程序公共配置文件 |
app.wxss | 否 | 小程序公共样式表 |
小程序中没有路由的概念,要在json里配置
一个小程序page页面由四个文件组成,分别是:
文件类型 | 必填 | 作用 |
js | 是 | 页面逻辑 |
wxml | 是 | 页面结构(相当于html) |
wxss | 否 | 页面样式表 |
json | 否 | 页面配置 |
参考网址:全局配置 | 微信开放文档
app.json 文件用来对微信小程序进行全局配置,设置小程序页面数量(路由)、窗口表现、设置底部或顶部菜单、网络请求超时时间等。
app.json中不能添加任何注释,key和value字符串必须用双引号引起来,数组或对象最后一位不能有逗号。
只要在数组中建目录自动生成文件
数组的第一项代表小程序的初始页面(首页)。小程序中新增/减少页面,都需要对 pages 数组进行修改。
要是接到的原型图是5个以上,可以自己用粘性布局自己写。
icon只能用本地的
定位获取
可以在初始化后,通过一个setData方法来进行后续数据源数据的修改工作。使用setData方法是一定要注意this的指向问题,setData是当前页面对象中的方法。
# 语法
this.setData({key:value})
语法:wx:for 循环
语法:wx:if
在框架中,使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块:
也可以用 wx:elif 和 wx:else 来添加一个 else 块:
把模板定义到外部,然后多个页面间可以共用使用定义的模板WXML结构显示。
WXML 提供两种文件引用方式import和include
在 user.wxml 中定义了一个叫item的template:
在 index.wxml 中引用了 item.wxml,就可以使用item模板:
include相当于把引入的文件内容直接复制到目录文件中。
WXSS是一套样式语言,用于描述 WXML 的组件样式。
为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。
WXSS 在底层支持新的尺寸单位 rpx 响应式尺寸单位
定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。
目前支持的选择器有:
选择器 | 样例 | 样例描述 |
.class | .intro | 选择所有拥有 class="intro" 的组件 |
#id | #firstname | 选择拥有 id="firstname" 的组件 |
element | view | 选择所有 view 组件 |
element, element | view, checkbox | 选择所有文档的 view 组件和所有的 checkbox 组件 |
::after | view::after | 在 view 组件后边插入内容 |
::before | view::before | 在 view 组件前边插入内容 |
注:在小程序中,建议大家都在flex布局
网址:Page(Object object) | 微信开放文档
由框架自己触发的一系统事件函数(钩子函数)。
小程序数据互交就是通过不同的事件函数来完成的,了解生命周期函数,对于以后的数据交互是非常重要的。
页面的初始数据
页面加载时触发。一个页面只会调用一次,可以在 onLoad 的参数中获取打开当前页面路径中的参数。
参数说明
名称 | 类型 | 说明 |
query | Object | 打开当前页面路径中的参数 json对象 |
页面显示/切入前台时触发。一个页面可以触发N次。
页面初次渲染完成时触发。一个页面只会调用一次。
页面隐藏/切入后台时触发。一个页面可以触发多次
监听用户下拉动作,此事件需要在app.json文件中window节点中“开启全局的下拉刷新”
“enablePullDownRefresh”:true,才能触发它 作用:下拉加载更多
页面上拉触底事件的处理函数,需要当前页面内容超过一屏显示 作用:上拉加载更多
页面滚动触发事件的处理函数,需要当前页面内容超过一屏显示 作用:滚动事件监听
用户点击右上角转发,触发此方法,在此方法中可以自定义转发的内容。 作用:自定义分享
没有就去文档找api
小程序事件绑定是在组件中以属性的形式来完成的。
语法:
bind事件名/catch事件名=”方法名”
注:小程序中绑定方法名不能用括号,直接写方法名即可
bind绑定为冒泡事件
catch绑定为非冒泡事件
自基础库版本 1.5.0 起,在非原生组件中,bind和catch后可以紧跟一个冒号,其含义不变,如bind:tap
原生组件【camera、canvas、live-player、live-pusher、video、map、textarea、input】
当组件触发事件时,逻辑层绑定该事件的处理方法会收到一个事件对象。通过此对象来进行小程序的自定义事件参数据传递。
BaseEvent 基础事件对象属性列表:
属性 | 类型 | 说明 |
type | String | 事件类型 |
timeStamp | Integer | 事件生成时的时间戳 |
target | Object | 触发事件的组件的一些属性值集合 data- 开头定义的属性 |
currentTarget | Object | 当前组件的一些属性值集合(对象) 在组件中 data- 开头定义的属性 |
传参
网址:uni-app官网
uni-app 是一个使用 Vue.js 开发小程序、H5、App的统一前端框架。开发者使用 Vue 语法编写代码,uni-app 框架将其编译到 小程序(微信/支付宝/百度/字节跳动/QQ/钉钉)、App(iOS/Android)、H5等多个平台,保证其正确运行并达到优秀体验。
DCloud有800万开发者,uni统计手机端月活12亿。是开发者数量和案例最丰富的多端开发框架。
详细见官网地址:uni-app官网
6.1、安装HbuilderX工具
网址:uni-app官网
uni-app支持通过 可视化界面、vue-cli命令行 两种方式快速创建项目。
选择可视化界面创建项目
打开刚刚下载好的hbuildx工具,在点击 文件 -> 新建 -> 项目
选择uni-app类型,输入工程名,选择模板,点击创建,即可成功创建。
到此,uni-app项目就创建成功
只要是.什么结尾的不用管
打开微信小程序开发工具,设置 à 安全设置
开启服务端口设置
进入uniapp项目,点击工具栏的运行 -> 选择微信开发者工具运行
看到此界面,表示运行成功
优先用没差异的
网络请求
封装条件编译
用导入,手动关联
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。