全栈开发工程师微信小程序-中(下)
全栈开发工程师微信小程序-中(下)
微信小程序视图层
wxml
用于描述页面的结构,wxss
用于描述页面的样式,组件用于视图的基本组成单元.
// 绑定数据
index.wxml
<view> {{message}} <view>
index.js
Page({
data: ({
message: 'Hello'
})
})
// 组件属性
// data中的数据绑定到微信小程序组件上
<view id="item-{{id}}"></view>
Page({
data: {
id: 0
}
})
<view wx:if="{{con}}"></view>
Page({
data: {
con: true
}
})
<checkbox checked="{{false}}"></checkbox>
<view hidden="{{flag ? true : false}}">hello</view>
<view>{{a+b}}+{{c}}+d</view>
Page({
data: {
a: 1,
b: 2,
c: 3
}
})
3+3+d
<view wx:if="{{len > 5}}"></view>
<view>{{"dashu" + name}}</view>
Page({
data: {
name: 'coding'
}
})
<view>{{object.key}} {{array[0]}}</view>
Page({
object: {
key: "dashucoding"
},
array: ['dashu']
})
<view wx:if="{{con}}"> dashu </view>
// 是否进行渲染
<view wx:if="{{len > 4}}">view1</view>
<view wx:elif="{{len > 3}}">view2</view>
<view wx:else>view3</view>
<view wx:for="{{arr}}">
{{index}} : {{item.message}}
</view>
Page({
arr:[{
message: "a",
},{
message: "b"
}]
})
// wx:for-item指定数组当前元素的变量名
// wx:for-index指定数组当前项目下标的变量名
<view wx:for="{{arr}}" wx:for-index="ind" wx:for-item="itemN">
{{ind}} : {{itemN.message}}
</view>
一个包含多个节点的结构块block
<block wx:for="{{[1,2,3,4,5]}}">
<view> {{index}} </view>
<view> {{item}} </view>
</block>
// wx:key指定唯一标识符
动态改变或有新列表的加入
<switch wx:for="{{obj}}" wx:key="con" style="display: block;"> {{item.id}} </switch>
Page({
obj: [
{id: 3, con:'con_3'},
{id: 2, con:'con_2'},
{id: 1, con:'con_1'},
]
})
// 定义模板 template
// 共用代码,一次编写多次使用
<template name="item">
<view>
<text>{{index}} : {{time}}</view>
</view>
</template>
// wxml
// is使用模板
<template is="item" data="{{item}}">
Page({
data:: {
index: 0
}
})
<template name="old">
<view> old </view>
<template>
<template name="new">
<view> new </view>
</template>
<block wx:for="{{[2,3,4,5]}}">
<template is="{{item == 2 ? 'old' : 'new'}}"/>
</block>
// 引用功能
import引用目标文件
<template name="item">
<text>{{text}}</text>
</template>
index引用item.
<import src="item.wxml"/>
<template is="item" data="{{text: 'name'}}"/>
// import引用模板
// include引用整个文件
<include src="header.wxml"/>
<view> body </view>
<include src="foot.wxml"/>
<view> header </view>
<view> footer </view>
view 视图容器组件
scroll-view 可滚动视图区域
swiper 滑块视图容器组件
icon 图标组件
text 文本组件
progress 进度条组件
button 按钮组件
checkbox 多项选择器
radio 单项选择器
form 表单组件
input 单行输入框
textarea 多行输入框
label 改进表单可用性
picker 滚动选择器
slider 滑动选择器
switch开关选择器
navigator 页面链接组件跳转
audio 音频组件
image 图片组件
video 视频组件
// 客服会话按钮组件
contact-button
wx.request 用来请求服务器的
w.downloadFile 文件上传与下载
WebSocket 会话用来创建一个会话连接
wx.chooseImage 选择图片
wx.previewImage 预览图片
wx.getImageInfo 获取图片信息
wx.saveFile 保存文件到本地
wx.getSavedFileList 获取本地文件列表
wx.getSavedFileInfp 获取本地文件信息
wx.removeSavedFile 删除本地文件
wx.openDocument 打开文档
// 数据缓存
wx.setStorage 异步方式将数据存储在本地缓存
wx.setStorageSync 同步方式将数据存储到本地缓存指定的key中
// 本地缓存数据
wx.getStorage, wx.getStorageSync, wx.getStorageInfo, wx.getStorageInfoSync
// 清除数据
wx.removeStorage 用来异步从本地缓存中移除指定的key
wx.removeStorageSync 用来同步从本地缓存中移除指定的key
wx.clearStorage() 异步清理
wx.clearStorageSync() 同步清理
// 位置信息
wx.getLocation, wx.chooseLocation, wx.openLocation, wx.createMapContext.
wx.getLocation() 可以获取当前位置信息
wx.chooseLocation() 打开地图选择位置
wx.openLocation() 微信内置地图查看位置
// 获取设备
wx.getSystemInfo 用来获取异步获取设备的系统信息
wx.getSystemInfoSync 用于同步获取系统信息
wx.getNetworkType 用来获取网络类型
wx.onAccelerometerChange 用来进行重力感应
wx.onCompassChange 用来监听罗盘数据
wx.makePhoneCall 用来拨打电话
wx.scanCode 用来调出客户端扫码界面
// 交互反馈
wx.showToast 用来显示消息提示框
wx.hideToast 隐藏消息提示框
wx.showModal 显示模态弹窗
wx.showActionSheet 显示操作菜单
// api
wx.login 获取登录凭证
wx.checkSession 检查登录状态是否过期
wx.getUserInfo 获取用户信息
onShareAppMessage
// 用来设置页面的分享信息
Page({
onShareAppMessage: function(){
return {
title: '自定义标题',
desc: '描述',
path: 'page/user?id=123'
}
}
})
// 微信支付
微信支付5个步骤:
小程序内调用登录接口
商户系统调用支付统一下单
商户系统调用再次签名
商户系统接收收支通知
系统查询支付
微信支付用户->微信小程序->商户系统->微信后台
// 获取用户信息
Page({
onLoad: function(){
wx.getUserInfo({
success: function(res){
console.log(res);
var userInfo=res.userInfo
var nickName=userInfo.nickName
}
})
}
})
// 校验登录状态是否过期
wx.checkSession({
success: function(){
},
fail: function(){
wx.login()
// 登录态过期
}
})
App({
onLaunch: function(){
wx.login({
success: function(res) {
if(res.code){
wx.request({
url: '',
data: {
code: res.code
}
})
}else{
console.log(res.errMsg)
}
}
})
}
})
// 操作菜单
// wx.showActionSheet
wx.showActionSheet({
itemList: ['A', 'B', 'C'],
success(res) {
console.log(res.tapIndex)
},
fail(res) {
console.log(res.errMsg)
}
})
// wx.showModal
// 显示模态对话框
wx.showModal({
title: '提示',
content: '这是一个模态弹窗',
success(res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
// wx.showToast
// 显示消息提示框
wx.showToast({
title: '成功',
icon: 'success',
duration: 2000
})
setTimeout(function(){
wx.hideToast
},2000)
// wx.scanCode
调起客户端扫码界面进行扫码
// 允许从相机和相册扫码
wx.scanCode({
success(res) {
console.log(res)
}
})
// 只允许从相机扫码
wx.scanCode({
onlyFromCamera: true,
success(res) {
console.log(res)
}
})
// wx.makePhoneCall
// 拨打电话
wx.makePhoneCall({
phoneNumber: '1340000' // 仅为示例,并非真实的电话号码
})
如果看了觉得不错
点赞!转发!
达叔小生:往后余生,唯独有你
You and me, we are family !
90后帅气小伙,良好的开发习惯;独立思考的能力;主动并且善于沟通
简书博客: 达叔小生
https://www.jianshu.com/u/c785ece603d1
结语
- 下面我将继续对 其他知识 深入讲解 ,有兴趣可以继续关注
- 小礼物走一走 or 点赞
全栈开发工程师微信小程序-中(下)的更多相关文章
- 全栈开发工程师微信小程序-中(中)
全栈开发工程师微信小程序-中(中) 开放能力 open-data 用于展示微信开放的数据 type 开放数据类型 open-gid 当 type="groupName" 时生效, ...
- 全栈开发工程师微信小程序-中
全栈开发工程师微信小程序-中 多媒体及其他的组件 navigator 页面链接 target 在哪个目标上发生跳转,默认当前小程序,可选值self/miniProgram url 当前小程序内的跳转链 ...
- 全栈开发工程师微信小程序-上(下)
全栈开发工程师微信小程序-上(下) icon 图标 success, success_no_circle, info, warn, waiting, cancel, download, search, ...
- 全栈开发工程师微信小程序-上(中)
全栈开发工程师微信小程序-上(中) width: 750rpx; 750rpx代表与屏幕等宽,rpx的缩写responsive pixel,这个单位是可以根据屏幕大小进行自适应调整的像素单位. 小程序 ...
- 全栈开发工程师微信小程序 - 上
全栈开发工程师微信小程序-上 实现swiper组件 swiper 滑块视图容器. indicator-dots 是否显示面板指示点 false indicator-color 指示点颜色 indica ...
- 全栈开发工程师微信小程序-下
app.json { "pages": ["pages/index/index"] } index.wxml <text>Hello World&l ...
- 全栈之路-微信小程序-SKU开发(代码)
SKU开发是小程序中最难的一部分,思路在分析中已经记录过了,这里主要看一下代码的实现,感觉老师写的代码太棒了,很优雅!主要想记录一下写代码的思路,对面向对象编程的实践. 一.代码结构的分析 1.说明几 ...
- 全栈之路-微信小程序-SKU开发(分析)
SKU是整个小程序中最难完成的部分了,好好记录一下SKU,主要是想记录一下 从最开始拿到这个业务到最终完成这个功能期间的思考过程,至于代码什么的,记录也好,不记录也行,再看! 一.从思路说起 1.SK ...
- 全栈之路-微信小程序-架构总览
第一阶段是用来学习小程序开发的,这个就相当于PC端的网站吧,只不过现在依靠微信强大的流量来将业务搬移到小程序中,对于企业来说,这是一种很好的发展方向,既减少了开发成本,又减少了推广成本,小程序是很被人 ...
随机推荐
- docker-2 tomcat
启动容器命令 docker run -d -p 8080:8080 -v /root/tomcat/webapps:/usr/local/tomcat/webapps -v /root/tomcat/ ...
- ng环境搭建步骤
1,安装node node -v查看版本号 2,安装淘宝镜像 npm config set registry https://registry.npm.taobao.org 3,安装cnpm npm ...
- 探究osg中的程序设计模式【目录】
前序 探究osg中的程序设计模式---开篇 探究osg中的程序设计模式---创造性模式 探究osg中的程序设计模式---创造型模式---Factory(工厂)模式 探究osg中的程序设计模式---创造 ...
- propertychange事件导致的IE浏览器堆栈溢出
前段事件做项目,在IE下测试时,发现会报堆栈溢出的错误,其他浏览器正常,于是开始了苦逼的IE查错路程... 由于是在操作了某个输入框之后才出现的错误,所以把重点放到了input的相关事件,最终发现是这 ...
- win7系统 LR11 安装与破解
注意一定要以管理员身份运行启动LR程序 Loadrunner11 安装: 1.运行“setup.exe” 2. 点击安装,其中会有提示缺少“Microsoft Visual C++ 2005 SP1等 ...
- 第一二次java实训作业
1. 声明一个整型变量a,并赋初值5,在程序中判断a是奇数还是偶数,然后输出判断的结果. package java1; public class java1 { static int a=5; pub ...
- Java 初学UDP传输
不谈理论,先举简单例子. 发送端代码: public class UDPDemo { public static void main(String[] args) throws Exception { ...
- 图解HTTP第七章
确保 Web 安全的HTTPS 1>HTTP 的缺点 通信使用明文可能会被窃听: [1]TCP/IP 是可能被窃听的网络 [2]加密处理防止被窃听: *通信的加密:通过和 SSL(Secure ...
- C++标准库第二版笔记 3 和异常的理解 1
C++标准库第二版笔记 3 和异常的理解 1 差错和异常(error and exception)的处理 标准异常类(exception class) 定义于 分为: 1.语言本身支持的异常 2.标准 ...
- C++题解:Matrix Power Series ——矩阵套矩阵的矩阵加速
Matrix Power Series r时间限制: 1 Sec 内存限制: 512 MB 题目描述 给定矩阵A,求矩阵S=A^1+A^2+--+A^k,输出矩阵,S矩阵中每个元都要模m. 数据范围: ...