专栏首页达达前端全栈开发工程师微信小程序-中(下)

全栈开发工程师微信小程序-中(下)

全栈开发工程师微信小程序-中(下)

微信小程序视图层

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 点赞

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 全栈开发工程师微信小程序-中

    每个open-type都有默认的url属性,open-type为navigateBack时,url无效,delta的属性表示为反退,默认是1.

    达达前端
  • dashucoding记录2019.6.8

    阿里云市场 https://market.aliyun.com/products/53616009?spm=a2c4e.11153940.blogcont16...

    达达前端
  • 全栈开发工程师微信小程序-上

    wx:for是列表渲染标签,默认当前循环项的变量名为item.wx:key用于在动态列表渲染中保存子项的特征和状态.

    达达前端
  • python之图形界面

    在编写python GUI程序前,需要决定使用哪个GUI平台。wxpython----跨平台pythonGUI工具包

    py3study
  • python–GUI–制作简单的文本文档

    使用python的包包—wxpython,,安装命令是:apt-get install python-wxgtk2.8

    十四君
  • Python之GUI实现

    wxPython是Python的GUI图形库。很方便的创建完整的、功能键全的GUI用户界面。 wxPython是作为wxWidgets的Python封装,然后作...

    小末快跑
  • 开发实战分享|小程序扫码获取图书信息(内附详细教程)

    接触到云函数已经有一段时间了,之前一直在看api,现在自己跟着网络上的资料和视频学习,受到豆瓣读书系列的启发,决定用云函数做一个项目,获取图书信息并存入云数据库...

    腾讯云开发TCB
  • Wxpython快速构建GUI窗口程序

    最近学习了一下关于用wxpython来构建窗口GUI程序,关于wxFormbuilder和wxpython的用法,理解的还不是很透彻,强行此文。因此本文适合新人...

    叉叉敌
  • Python中文编程打造翻译器

    难点:在线翻译存在反爬虫技术,需进行反爬虫破解。 结果:使用中文(变量名及函数名的应用)编程验证并实现预定目标。 中-英翻译:

    用户6184845
  • 「 小程序踩坑 」获取用户地理位置名称

    通过百度查阅得知,普遍的做法就是先用wx.getLocation获取当前经纬度,然后再利用腾讯地图提供的接口,获取出实时地理名称,很简单,但是腾讯地图接口那里有...

    许坏

扫码关注云+社区

领取腾讯云代金券