小程序基础、云服务介绍
一、组件及基础属性介绍
1、属性介绍
属性 | 含义 |
text | 文本 |
view | 区域 |
button | 按钮 |
input | 表单 |
image | 图片 |
include | 包含 |
import | 导入 |
web-view | 导入html页面 |
2、容器组件
属性 | 含义 |
view | 试图区域 |
swiper、swiper-item | 幻灯片、轮播图 |
scroll-view | 滚动试图 |
3、基础容器
1、text 介绍:user-select可选文字
2、rich-text 富文本
3、icon 图标
4、表单
- button 介绍:type、size、自定义
- input 输入
- textarea 文本区域
- switch
5、navigator 导航
- open-type 介绍:redirect、switch-tap、navigate、relunch
- url
6、媒体
- image 介绍:src mode模式 lazy-load懒加载
- video 视频
7、其他
- map 地图
- web-view web试图
二、模板语法介绍
1、文本渲染
{{}}
2、条件渲染
wx:if="{{}}"
wx:elif="{{}}"
wx:else
3、列表渲染
wx:for="{{list}}"、{{item}}、{{index}}
wx:key="title"
4、自定义列表
wx:for="{{list}}"
wx:for-item="myitem"
wx:for-index="ind"
{{myitem}}
{{ind}}
5、import
1、定义模板 test.wxml
<temp name="user">
<view>用户名:{{name}}</view>
2、使用
<import src="xxx/test.wxml">
<template is="use" data={{...userInfo}}>
6、include
拷贝src中非template的内容
属性 | 含义 |
bindtap | 触摸/点击 |
bindchange | 值发生变化 |
bindconfrim | 确定 |
bindinput | 输入变化 |
四、表单的双向绑定
<input value="{{temp}}" bindinput="inputHd">
this.setData({temp:e.detail.value})
获取事件对应表单的值
e.detail.value
五、事件的传参数
<button bindtap="showMsg" data-msg=“你好,靓”>
showMsg(e){e.target.dataset.msg
}
六、响应式更新
this.setData({temp:''})
数据与试图都会更新
七、wx的api
1、微信内置的方法
wx.showToast({title:"",icon:})
//弹出土司提升
wx.showLoading()
wx.request()
//网络请求工具
wx.stopPullDownRefresh()
//停止下拉刷新
wx.setStorageSync(key,value)
wx.getStorageSync(key)//本次存、取
八、配置
1、全局配置
2、页面配置
"backgroundTextStyle": "light",
背景文字颜色 light | dark"navigationBarBackgroundColor": "#f70",
背景颜色"navigationBarTitleText": "小程序基础语法",
导航栏表情"navigationBarTextStyle": "white"
导航栏+状态栏文字颜色 white | black"enablePullDownRefresh": true,
允许页面下拉刷新"usingComponents": {}
使用组件
九、页面声明
属性 | 含义 |
onLoad | 页面加载 |
onPullDownRefresh | 下拉刷新 |
onReachBottom | 触底 |
十、页面跳转
1、组件(navigator)
2、open-type
属性 | 含义 |
navigate | 跳转 |
redirect | 重定向 |
switchTab | 切换底部栏 |
navigateBack |
3、js进行跳转
属性 | 含义 |
wx.navigateTo | 跳转 |
wx.switchTab | 底部栏切换 |
wx.redirectTo | 重定向 |
wx.navigateBack() | 返回 |
十一、小程序页面栈
1、小程序默认会缓存5个页面栈
2、页面跳转
属性 | 含义 |
navigate | 添加一个缓存页面栈 |
navigateBack | 移除一个页面栈 |
redirect | 替换一个一个页面栈 |
十二、页面传参
1、传递参数
<navigator url="xxxx?docid=yyyy&title=zzz"
2、获取参数
onLoad(options){//options.docid,options.title
}
十三、npm使用 weapp为例
1、在项目的根目录 npm init -y初始化项目
2、npm i @vant/weapp -S --production 安装
3、构建npm编辑器->工具->构建npm
4、修改app.js
注册组件
"usingComponents": {"van-button": "@vant/weapp/button/index"},
5、修改project.config.json setting
"packNpmManually": true,"packNpmRelationList": [{"packageJsonPath": "./package.json","miniprogramNpmDistDir": "./miniprogram/"}],
6、在组件中使用
<van-button type="info">主要按钮</van-button>
十四、小程序的生命周期
1、onLaunch 启动
2、onShow 前台显示
3、onHide 后台运行
十五、页面的声明周期
1、介绍
属性 | 含义 |
onLoad | 加载、可以获取页面传递的参数 |
onShow | 前台显示、开始播放视频 |
onReady | 初次渲染完毕、操作组件或者dom |
onHide | 隐藏、停止播放 |
onUnload | 卸载 |
十六、全局数据
1、app.js
定义全局数据globalData: { num:5}
2、页面
1、获取app
const app = getApp();
2、介绍
属性 | 含义 |
onShow | 全局数据更新本地数据 |
this.setData({count:app.globalData.num}) |
3、代码
// 更新时候要更新本地和全局addCount(){// 更新本地countthis.setData({count:this.data.count+1})// 更新全局的numapp.globalData.num +=1},
十七、自定义组件
1、步骤
1、创建一个组件
2、在页面中注册组件
"usingComponents": {"item":"/components/item/item"}
3、在页面中使用组件
2、组件的构造函数(Component)
属性 | 含义 |
extemalClasses | 外部类 |
properties | 父组件传入的属性(参数) |
data | 组件内部的数据 |
methods | 组件的方法 |
3、组件的传参(父传子)
1、父页面
<item title="收藏夹">
2、子组件接收
properies:{title:{type:String,value:''}
}
子组件页面wxml使用
{{title}}
子组件js的methods中使用
this.data.title
3、子传父
子组件js
this.triggerEvent("toggle",{value:true})
父组件。wxml
<item bind:toggle="toogleHd">
父组件.js
toggleHd(e){//获取e.detial.value
}
4、外部类
子组件.jsexternalClasses:[item-class]
子组件.wxml
<view class="item item-class">
父组件wxml传入
<item item-class="myItem">
父组件.wxss
.myItem{ height:100rpx !important!;color:red;}
十八、wx
1、登录
1、getUserProfile只能获取到用户的头像和昵称,不能作为唯一标识符合与后端进行交互
01、wx.login() 获取code把code发送给自己服务器(也可以加userInfo)
02、自己的服务器向微信服务器发送code+appid+AppSecret换取唯一标识符 openid
03、通过openid可以实现登录,注册,权限等功能
2、回到顶部/固定位置
wx.pageScrollTo({duration: 500, //时间scrollTop:0, //位置})wx.pageScrollTo({duration: 500,selector:".share" })
3、监听滚动(onPageScroll)
4、获取设置/窗口信息(wx.getSystemlnfoSync())
5、获取电量(wx.getBatterylnfoSync())
6、获取网络状态(wx.getNetworkType())
7、打电话/发短信
wx.makePhoneCall({phoneNumber: '13598859747',})
8、下载网络图片(权限)
wx.downloadFile()wx.saveImageToPhotosAlbum()
//保存到相册
9、上传图片
wx.chooseMedia({count:1})wx.uploadFile({filePath: res.tempFiles[0].tempFilePath
})
10、设置标题
wx.setNavigationBarTitle({title: '自定义组件',})
十九、小程序的限制
1、打包上传每个每个包不超过2M 总大小16M
2、本地存储 每次1M 总大小10/0M
3、底部栏2-5个
4、页面栈5个
二十、分包
1、介绍
打开小程序,默认值下载主包
小程序的打开速度加快
通过分包可以让项目更加庞大
2、分包
"subpackages": [{"root": "news","pages": ["pages/detail/detail"]}],
3、分包预加载
"preloadRule": {"pages/jok/jok": {"network": "all","packages": ["news"]}},
二十一、插件使用(wxParse)
1、作用:html转换为wx的组件
2、Copy文件夹
3、在页面js导入文件(地址是否正确)
var WxParse = require('../../wxParse/wxParse.js');
4、导入css
@import "/wxParse/wxParse.wxss";
5、引用数据
var that = this;
WxParse.wxParse('article', 'html', res.result.content, that, 5);
6、导入使用模板
<import src="../../wxParse/wxParse.wxml"/>
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>
二十二、云开发
1、概念
云数据库(moogoDB)
云函数(nodejs)
云存储
2、作用:
让前端脱离后端直接连接数据库和存储
写好nodejs、根据一定的规则操作业务数据,连接数据库
在吧nodejs上传到云端
在客户端调用nodejs对应的方法,获取服务器数据
3、云函数定义
1、config配置
2、package.json 包管理
3、js逻辑
01 导入wx 的sdk 初始化云
const cloud = require('wx-server-sdk')
cloud.init()02 导入数据库
const db = cloud.database();03 导出
exports.main = async (event, context) => {const wxContext = cloud.getWXContext()//当前微信的环境// event 调用函数传入的参数return {} 返回的数据
})云函数写好要上传到服务器
4、调用云函数
wx.cloud.callFunction({name:"addMsg",data:{}})
.then()
.catch()
name云函数的名称,
data 传入的参数
5、数据库操作
1、查
db.collection(“guest”).get()skip() 跳过orderby("date","desc") 日期从大到小limit ()限制.count() 查询总数
2、增
db.collection("guest").add({data:{}})
// data是添加的数据
3、删除
db.collection("guest").doc(event.id).remove()
6、云文件的操作
1、wx.cloud.uploadFile({})
项目 | value |
cloudPath | 文件名(存储到服务器的) |
path | 本地缓存文件 |
success | 成功 |
res.fileID | 文件地址 |
2、wx.chooseMedia({})
count:9 最多选择数量
res.tempFiles[i].tempFilePath
小程序基础、云服务介绍相关推荐
- 微信小程序快速关闭云服务,9月底就要按使用收费了,抓紧关闭吧
最近收到小程序的通知,说使用了云服务, 慌了神,下个月的饭还能保住嘛? 抓紧关了以绝后患, 上个月刚被AppleStore偷偷扣了688 开发者费用,wc 这个不能再犯了. 认真看操作如下: 要是打不 ...
- 微信原生小程序基础架构
文章目录 微信原生小程序基础架构 一.基本目录结构 二.登录鉴权部分 三.位置授权部分 四.版本升级部分 五.工具部分 MD5加密 六.系统信息部分 七.缓存处理 八.CSS兼容问题处理与公共样式 九 ...
- 微信小程序基础讲解,云服务介绍,分包及使用方法
一,组件及基础属性介绍 1.属性介绍 属性 含义 text 文本 view 区域 button 按钮 input 表单 image 图片 include 包含 import 导入 web-view 导 ...
- 最详细的【微信小程序+阿里云Web服务】开发部署指引(四):搭建服务端数据库
文章目录 前言 一.连接主机数据库 二.创建数据表结构 三.准备测试数据 专题文章链接 前言 做完了前面的注册申请工作,今天我们开始进行程序的开发. 这篇文章,我们要完成的是服务端数据库表的创建. 一 ...
- 最详细的【微信小程序+阿里云Web服务】开发部署指引(八):开发小程序卡片类型呈现功能
文章目录 前言 一.功能说明 二.代码实现 1.创建主界面Page 2.WXML 2.JS 3.WXSS 4.合法域名校验 5.图片缓存刷新问题的解决 小结 专题文章链接 前言 本篇文章,将对照专题案 ...
- 每日优鲜小程序基础组件介绍
每日优鲜小程序基础组件介绍 1.基础组件介绍 2.基础组件的结构与作用 3.基础组件的接入方法 初次引入 初始化 更新与维护 基础组件接入 1.基础组件介绍 小程序基础组件基于每日优鲜主商城小程序业务 ...
- 最详细的【微信小程序+阿里云Web服务】开发部署指引(十一):开发小程序设置功能
文章目录 前言 一.功能说明 二.设置界面代码实现 1.创建界面Page 2.WXML 3.JS 4.WXSS 三.参数控制逻辑代码实现 1.自动跳转卡片 2.自动播放声音 专题文章链接 前言 案例的 ...
- 最详细的【微信小程序+阿里云Web服务】开发部署指引(一):准备开始
文章目录 前言 案例说明 专题文章链接 前言 作为一个程序开发的老鸟,有时候想使用微信小程序,开发实现一些实用的小功能.由于小程序往往需要有后台数据的支持,所以一般还需要搭建一个Server服务器,来 ...
- 最详细的【微信小程序+阿里云Web服务】开发部署指引(十二):开发小程序用户反馈功能
文章目录 前言 一.功能说明 二.代码实现 1.创建界面Page 2.WXML 3.JS 4.WXSS 专题文章链接 前言 案例的运行效果,可以扫码观看: 本篇文章,我们将实现应用的用户反馈功能. 一 ...
最新文章
- 谷歌旗下DeepMind开发出编程机器人,已达人类程序员平均水平!
- 如何利用OpenCV寻找轮廓的中心?
- ubuntu14.04 qt4 C++开发环境搭建
- Python vaptcha手势人机验证码识别
- 机构:去年购房者平均年龄近30岁
- 交付效率提升40%,珍爱网基于微服务的DevOps落地指南
- Geary 0.13.0 发布,GNOME 3 Email 客户端应用
- 关于cp命令中拷贝所有的写法
- 表情识别(六)--局部特征学习和Handcrafted特征结合
- cad怎么画立体图形教学_立体图形怎么画步骤 找CAD图形中心点的方法步骤图
- 计算机本科考金融本科自考,金融专业自考本科考哪几门,自考金融本科科目学习考试顺序?...
- pip install镜像安装
- linux关机电源不断电,[转发]黑苹果修改DSDT彻底解决关机不断电和睡眠问题
- 英语说10点20有计算机课,101 projects in 1001 days实例
- Python【第十天】文件与模块
- Nginx安装成windows server 2016机器的服务
- 北航计算机学院吴俊杰,吴俊杰老师在经管学院建院六十周年大会上的发言
- HarmonyOS开发01:单击事件
- Julia 学习笔记(五) | 模块开发 - 保姆级教程
- 国外的WEB CRACK TEAM的破解发布网站