1 注册账号 appid: (每个账户都有)
2 微信开发者工具
uniapp-> 小程序、H5、App..
uniapp: 原生小程序+vue(2,3)
.wxml -> 类似.html
.wxss -> 类似.css
.js -> 定义页面的逻辑、监听事件、发送请求
.json -> 定义页面的配置
view块级区域 -> div
text行内区域 -> span
页面样式 大部分样式和选择器与css一样,️参考
data-> 初始化页面数据
setData-> 更新数据 { {}} -> 渲染数据
bind:事件类型=“回调”
pages:[页面路径,...]
entryPagePath: '小程序默认启动页面'
pages:用于指定小程序包含的所有页面路径列表,每个页面对应一个.js
、.wxml
、.wxss
和.json
文件。页面路径是相对于小程序根目录的路径,例如:"pages/index/index"表示根目录下的pages
目录中的index
页面。"pages": [ "pages/index/index", "pages/logs/logs" ],
"pages": [
"pages/index/index",
"pages/logs/logs"
],
2.window:用于指定小程序窗口的样式和配置选项,
例如navigationBarTitleText属性指定导航栏标题文字,
navigationBarBackgroundColor属性指定导航栏背景颜色,
backgroundTextStyle属性指定下拉动画的样式等。
enablePullDownRefresh: true 允许下拉刷新功能。
disableScroll
: 默认不禁止页面滚动。
"window": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "我的小程序",
"navigationBarBackgroundColor": "#ffffff",
"enablePullDownRefresh": true,
"backgroundTextStyle":"dark"
},
3.tabBar:
tabBar是移动端应用常见的页面效果,用于实现多页面的快速切换
。小程序中通常将其分为:底部tabBar 、顶部tabBar
tabBar的6个组成部分
① backgroundcolor:tabBar的背景色
② selectedlconPath:选中时的图片路径
③ borderStyle:tabBar 上边框的颜色
④ iconPath:未选中时的图片路径
⑤ selectedcolor:tab上的文字选中时的颜色
⑥ color:tab 上文字的默认(未选中)颜色
每一个tab项的配置选项:
pagePath:页面路径,页面必须在 pages 中预先定义
text:tab 上显示的文字
iconPath:未选中时的图标路径;当postion为top时,不显示icon
selectedlconPath:选中时的图标路径;当 postion为top 时,不显示icon
// 和window配置同级
"tabBar": {
"list": [{
"pagePath": "pages/event/event",
"text": "事件测试"
},
{
"pagePath": "pages/index/index",
"text": "index"
}]
}
最少2个、最多5个
tab页签顶部tabBar
时,不显示icon
,只显示文本window: {} // 窗口表现 ,参考全局配置 | 微信开放文档
页面.json
绝大多数配置与全局配置一样,有的配置只能在页面配置文件中配置如disableScroll
注意:当页面配置与全局配置冲突的时,根据就近原则
,最终的效果以页面配置为准
。
小程序中,app.json中的window节点,可以全局配置
小程序中每个页面的窗口表现。
如果某些小程序页面想要拥有特殊的窗口表现
,此时,页面级别的.json配置文件
就可以实现这种需求。
小程序中满屏等于750rpx,项目设计稿宽度一般为750px,方便前端布局单位换算
普通视图区域、类似于HTML中的div,是一个块级元素、常用来实现页面的布局效果
<view>
<text>{
{ message }}</text>
<button bind:tap="onTap">点击我</button>
</view>
scroll-view
:scroll-y 允许垂直方向 滚动
scroll-x 允许水平方向 滚动
refresher-enabled 开启下拉刷新
可滚动的视图区域,常用来实现滚动列表效果
swiper和swiper-item
轮播图容器组件和轮播图item组件
关于swiper组件的常用属性:
1 indicator-dots:是否显示面板指示点
默认值false
2 indicator-color:指示点颜色
3 indicator-active-color:当前选中的指示点颜色
4 autoplay:是否自动切换
5 interval:自动切换时间间隔
6 circular:是否采用衔接滑动
文本组件,类似HTML中的span标签,是一个行内元素
button
: 按钮组件,功能比HTML中的button按钮丰富, 通过open-type
属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等等)
image
图片组件, image组件默认宽度约 300px、高度约240px 例如:<image src="图片路径" mode="图片填充模式"/>
, image组件的mode
属性用来指定图片的裁剪
和缩放
模式,常用的mode属性值如下
s
aspectFit: 缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来
aspectFill: 缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
widthFix: 缩放模式,宽度不变,高度自动变化,保持原图宽高比不变
heightFix: 缩放模式,高度不变,宽度自动变化,保持原图宽高比不变
一般项目中根据设计稿设置imàge宽高,当图片宽高和占位容器不一致,建议mode="aspectFill"
navaigator <navaigator url="/pages/index/index" hover-class"link-hover'
open-type="switchTab">跳到首页</navigator>
url-支持相对或绝对路径
hover-class 点击导航样式
跳转到tab页面需要增加open-type="switchTab"
button
<button>
为按钮组件,是常用的表单组件之一,用于事件的触发以及表单的提交。
<view class="demo-box">
<view class="title">7.button小案例</view>
<view class="title">(1)迷你按钮</view>
<button size="mini" type="primary">主要按钮</button>
<button size="mini" type="default">次要按钮</button>
<button size="mini" type="warn">警告按钮</button>
<view class="title">(2)按钮状态</view>
<button>普通按钮</button>
<button disabled>警用按钮</button>
<button loading>加载按钮</button>
<view class="title">(3)增加按钮事件</view>
<button bindgetuserinfo="getUserDetail" open-type="getUserInfo">点我获取用户信息</button>
</view>
checkbox
<checkbox>
为复选框组件,常用于在表单中进行多项数据的选择。复选框的<checkbox-group>
为父控件,其内部嵌套若干个<checkbox>
子控件
<checkbox-group>属性如下:
属性:bindchange
类型:EventHandle
checkbox-group中选中项发生改变时触发change 事件,detail ={value:[选中的checkbox的value的数组]}
<checkbox>
组件的属性如下:
属性
value:checkbox标识,选中时触发checkbox-group的 change 事件,并携带checkbox 的value
checked:当前是否选中,可用来设置默认选中
代码示例:
.wxml
<view class="demo-box">
<view class="title">8.checkbox小案例</view>
<view class="title">利用for循环批量生成</view>
<checkbox-group bindchange="checkboxChange">
<label wx:for="{
{items}}">
<checkbox value="{
{item.name}}" checked="{
{item.checked}}" />{
{item.value}}
</label>
</checkbox-group>
</view>
checkbox.js
Page({
data: {
items: [
{ name: "tiger", value: "老虎" },
{ name: "elephant", value: "大象" },
{ name: "lion", value: "狮子", checked: "true" },
{ name: "penguin", value: "企鹅" },
{ name: "elk", value: "麋鹿" },
{ name: "swan", value: "天鹅" },
]
},
checkboxChange:function(e) {
console.log("checkbox发生change事件,携带value值为:", e.detail.value)
}
})
input
<input>
为输入框组件,常用于文本(如姓名、年龄等信息)的输入。属性表如下:
属性:
type:input的类型
placehoder:输入框为空时的占位符
label
<label>是标签组件,不会呈现任何效果,但是可以用来改进表单组件的可用性。当用户在label元素内点击文本时,就会触发此控件,即当用户选择该标签时,事件会传递到和标签相关的表单控件上,可以使用for属性绑定id,也可以将空间放在该标签内部,该组件对应属性如下所示
for:绑定控件的id
<view class="demo-box">
<view class="title">10.lable小案例</view>
<view class="title">(1)利用for属性</view>
<checkbox-group>
<checkbox id="tiger" checked />
<label for="tiger">老虎</label>
<checkbox id="elephant" />
<label for="elephant">大象</label>
<checkbox id="lion" />
<label for="lion">狮子</label>
</checkbox-group>
<view class="title">(2)label包裹组件</view>
<checkbox-group>
<label>
<checkbox checked />老虎
</label>
<label>
<checkbox/>大象
</label>
<label>
<checkbox/>狮子
</label>
</checkbox-group>
</view>
form
<form>
为表单控件组件,用于提交表单组件中的内容。<form>
控件组件内部可以嵌套多种组件。
.wxml
<view class="demo-box">
<view class="title">11.form小案例</view>
<view class="title">模拟注册功能</view>
<form bindsubmit="onSubmit" bindreset="onReset">
<text>用户名:</text>
<input name="username" type="text" placeholder="请输入你的用户名"></input>
<text>密码:</text>
<input name="password" type="password" placeholder="请输入你的密码"></input>
<text>手机号:</text>
<input name="phonenumber" type="password" placeholder="请输入你的手机号"></input>
<text>验证码:</text>
<input name="code" type="password" placeholder="请输入验证码"></input>
<button form-type="submit">注册</button>
<button form-type="reset">重置</button>
</form>
</view>
.js
Page({
onSubmit(e) {
console.log("form发生了submit事件,携带数据为:")
console.log(e.detail.value)
},
onReset() {
console.log("form发生了reset事件,表单已被重置")
}
})
radio
<radio>
为单选框组件,往往需配合<radio-group>
组件来使用,<radio>
标签嵌套在<radio-group>
当中。
<radio-group>
组件属性如下:
<radio>
组件属性如下:
.wxml
<view class="demo-box">
<view class="title">14.radio小案例</view>
<view class="title">利用for循环批量生成</view>
<radio-group bindchange="radioChange">
<block wx:for="{
{radioItems}}">
<radio value="{
{item.name}}" checked="{
{item.checked}}" />{
{item.value}}
</block>
</radio-group>
</view>
.js
Page({
data: {
radioItems: [
{ name: 'tiger', value: '老虎' },
{ name: 'elephant', value: '大象' },
{ name: 'lion', value: '狮子', checked: 'true' },
{ name: 'penguin', value: '企鹅' },
{ name: 'elk', value: '麋鹿' },
{ name: 'swan', value: '天鹅' },
]
},
radioChange:function(e) {
console.log("radio发生change事件,携带value值为:", e.detail.value)
}
})
只需要调整 app.json ->pages 数组中页面路径的前后顺序,即可修改项目的首页。小程序会把排在第一位的页面,当作项目首页进行渲染
WXML(WeiXin Markup Language)是小程序框架设计的一套标签语言,用来构建小程序页面的结构,其作用类似于网页开发中的 HTML。
① 标签名称不同
HTML(div, span, img, a)
WXML(view,text,image, navigator)
② 属性节点不同
<a href="#">超链接</a>
<navigator url="/pages/home/home"></navigator>提供了类似于 Vue 中的模板语法
③提供了类似于 Vue 中的模板语法
数据绑定
列表渲染
条件渲染
① 新增了 rpx 尺寸单位
CSS 中需要手动进行像素单位换算,例如rem
WXSS 在底层支持新的尺寸单位rpx,在不同大小的屏幕上小程序会自动进行换算
②提供了全局的样式和局部样式因
项目根目录中的 app.wxss 会作用于所有小程序页面
局部页面的 .wxss 样式仅对当前页面生效
③ WXSS 仅支持部分 CSS 选择器
在小程序中,不存在 HTML 中的 onclick 鼠标点击事件,而是通过 tap 事件来响应用户的触摸行为。
通过 bindtap,可以为组件绑定 tap 触摸事件,语法如下
在vxml
<view>
{
{ msg }}
<button bind:tap="changeMsg" size="mini" type="primary">修改msg</button>
</view>
在index.js 文件中定义对应的事件处理函数
Page({
// 定义数据
data: {
msg: '这是我第一个微信小程序'
})
在 data 中定义数据
在 WXML 中使用数据
在页面对应的 .js 文件中,把数据定义到 data 对象中即可:
Page({
data: {
category: [],
filePath: 'https://img0.baidu.com/it/u=2179487651,2777141936&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=305'
}
在小程序中,使用 wx:if="{ {condition}}" 来判断是否需要渲染该代码块
也可以用wx:else 来添加 else 判断
<view wx:if="{
{ isLogin }}">
欢迎您访问系统
</view>
<view wx:else>
请登录
</view>
通过 wx:for 可以根据指定的数组,循环渲染重复的组件结构
item 默认值 -> 每一项
index 默认值 -> 索引
在index.wxml
<view>
<view>
<text>序号</text>
<text>名称</text>
<text>价格</text>
</view>
<!--
wx:for重复渲染组件内容
item 默认值 -> 每一项
index 默认值 -> 索引
wx:key="id" 每一项是对象,直接写属性名,每一项是简单类型 直接写*this
wx:for-item="good" 自定义访问数组单元的变量名
wx:for-index="idx" 自定义访问数组索引的 变量名
-->
<view wx:for="{
{goodsList}}" wx:key="id" wx:for-item="good" wx:for-index="idx">
<text>{
{ idx + 1}}</text>
<text>{
{ good.name }}</text>
<text>{
{good.price}}</text>
</view>
</view>
在index.js
goodsList: [
{
id: 1,
name: 'TCL电视',
price: 3000
},
{
id: 2,
name: '小米汽车',
price: 3000000
},
{
id: 3,
name: '华为P60',
price: 5000
}
]
}
在小程序中,直接使用 hidden="{ { condition }}" 也能控制元素的显示与隐藏
wx:if 以动态创建和移除元素的方式,控制元素的展示与隐藏
hidden 以切换样式的方式(display: none/block;),控制元素的显示与隐藏
频繁切换时,建议使用 hidden
控制条件复杂时,建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换
调用微信小程序提供的 wx.request() 方法,可以发起 GET 数据请求
//发起GET请求
getInfo(){
wx.request({
url: 'https://XXX',//所要请求的接口地址
method:'GET',//请求的方式
data:{
name:'XX',
age:20
},
//请求成功的回调函数
success:(res)=>{
console.log(res)//打印服务器返回的对象
},
//请求失败的回调函数
fail:(res)=>{
console.log('请求数据失败!')
},
//无论请求成功与否都会执行的函数
complete:(res)=>{
console.log('已经发送网络数据请求!')
}
})
},
调用微信小程序提供的 wx.request() 方法,可以发起 POST 数据请求
//发起POST请求
getInfo(){
wx.request({
url: 'https://XXX',//所要请求的接口地址
method:'POST',//请求的方式
data:JSON.stringify({
"sbr": "gy",
"fcqk": "2"
}),
header:{'content-type': 'application/json'},
//请求成功的回调函数
success:(res)=>{
console.log(res)//打印服务器返回的对象
},
//请求失败的回调函数
fail:(res)=>{
console.log('请求数据失败!')
},
//无论请求成功与否都会执行的函数
complete:(res)=>{
console.log('已经发送网络数据请求!')
}
})
},
url参数为请求的地址
method参数为请求方法
data参数为请求参数
success为请求成功的回调
fail为请求失败的回调。
小程序的生命周期函数是在app.js中调用,通过App(Object)函数用来注册一个小程序,指定其小程序的生命周期回调
onLanch: 小程序初始化完成时触发,全局只触发一次
onShow: 小程序启动,或从后台进入前台时触发
onHide: 小程序从前台进入后台时触发(如底部tab栏切换到其他页面)
onEerror:小程序发生错误或者API调用报错时触发
onPageNotFound: 小程序要打开的页面不存在时触发
onUnhandleRejection:小程序有未处理的Promise拒绝时触发
onThemeChange:系统切换主题时触发
onLoad: 监听页面加载(只会调用一次,可获取当前页面路径的参数,相当于view中的created)
onShow: 监听页面显示(发送请求获取数据)
onReady:监听页面初次渲染完成(获取页面元素,相当于view中的mounted)
onHide:监听页面隐藏(如底部tab栏切换到其他页面或小程序切入后台等触发)
onUnload:监听页面卸载(如redirectTo或navigateBack到其他页面时触发)
created:监听页面加载
attached:监听页面显示(这个生命周期用的多,绝大多数初始化工作可以在这里进行)
ready:监听页面初次渲染完成
moved:监听页面隐藏
detached:监听页面卸载
error:每当组件方法抛出错误时间
showToast:消息提示框
showModal:模态对话框
showLoading:加载框
showDialog:展示弹框
showActionSheet(Object object):显示操作菜单
handleReachBottom:滚动到底部
onPullRefresh:下拉刷新
文章浏览阅读1k次。通过使用ajax方法跨域请求是浏览器所不允许的,浏览器出于安全考虑是禁止的。警告信息如下:不过jQuery对跨域问题也有解决方案,使用jsonp的方式解决,方法如下:$.ajax({ async:false, url: 'http://www.mysite.com/demo.do', // 跨域URL ty..._nginx不停的xhr
文章浏览阅读2k次。关于在 Oracle 中配置 extproc 以访问 ST_Geometry,也就是我们所说的 使用空间SQL 的方法,官方文档链接如下。http://desktop.arcgis.com/zh-cn/arcmap/latest/manage-data/gdbs-in-oracle/configure-oracle-extproc.htm其实简单总结一下,主要就分为以下几个步骤。..._extproc
文章浏览阅读1.5w次。linux下没有上面的两个函数,需要使用函数 mbstowcs和wcstombsmbstowcs将多字节编码转换为宽字节编码wcstombs将宽字节编码转换为多字节编码这两个函数,转换过程中受到系统编码类型的影响,需要通过设置来设定转换前和转换后的编码类型。通过函数setlocale进行系统编码的设置。linux下输入命名locale -a查看系统支持的编码_linux c++ gbk->utf8
文章浏览阅读750次。今天准备从生产库向测试库进行数据导入,结果在imp导入的时候遇到“ IMP-00009:导出文件异常结束” 错误,google一下,发现可能有如下原因导致imp的数据太大,没有写buffer和commit两个数据库字符集不同从低版本exp的dmp文件,向高版本imp导出的dmp文件出错传输dmp文件时,文件损坏解决办法:imp时指定..._imp-00009导出文件异常结束
文章浏览阅读143次。当下是一个大数据的时代,各个行业都离不开数据的支持。因此,网络爬虫就应运而生。网络爬虫当下最为火热的是Python,Python开发爬虫相对简单,而且功能库相当完善,力压众多开发语言。本次教程我们爬取前程无忧的招聘信息来分析Python程序员需要掌握那些编程技术。首先在谷歌浏览器打开前程无忧的首页,按F12打开浏览器的开发者工具。浏览器开发者工具是用于捕捉网站的请求信息,通过分析请求信息可以了解请..._初级python程序员能力要求
文章浏览阅读7.6k次,点赞2次,收藏6次。@Service标注的bean,类名:ABDemoService查看源码后发现,原来是经过一个特殊处理:当类的名字是以两个或以上的大写字母开头的话,bean的名字会与类名保持一致public class AnnotationBeanNameGenerator implements BeanNameGenerator { private static final String C..._@service beanname
文章浏览阅读6.9w次,点赞73次,收藏463次。1.前序创建#include<stdio.h>#include<string.h>#include<stdlib.h>#include<malloc.h>#include<iostream>#include<stack>#include<queue>using namespace std;typed_二叉树的建立
文章浏览阅读7.1k次。在Asp.net上使用Excel导出功能,如果文件名出现中文,便会以乱码视之。 解决方法: fileName = HttpUtility.UrlEncode(fileName, System.Text.Encoding.UTF8);_asp.net utf8 导出中文字符乱码
文章浏览阅读2.1k次,点赞4次,收藏23次。第一次实验 词法分析实验报告设计思想词法分析的主要任务是根据文法的词汇表以及对应约定的编码进行一定的识别,找出文件中所有的合法的单词,并给出一定的信息作为最后的结果,用于后续语法分析程序的使用;本实验针对 PL/0 语言 的文法、词汇表编写一个词法分析程序,对于每个单词根据词汇表输出: (单词种类, 单词的值) 二元对。词汇表:种别编码单词符号助记符0beginb..._对pl/0作以下修改扩充。增加单词
文章浏览阅读773次。我在使用adb.exe时遇到了麻烦.我想使用与bash相同的adb.exe shell提示符,所以我决定更改默认的bash二进制文件(当然二进制文件是交叉编译的,一切都很完美)更改bash二进制文件遵循以下顺序> adb remount> adb push bash / system / bin /> adb shell> cd / system / bin> chm..._adb shell mv 权限
文章浏览阅读6.8k次,点赞12次,收藏125次。1. 单目相机标定引言相机标定已经研究多年,标定的算法可以分为基于摄影测量的标定和自标定。其中,应用最为广泛的还是张正友标定法。这是一种简单灵活、高鲁棒性、低成本的相机标定算法。仅需要一台相机和一块平面标定板构建相机标定系统,在标定过程中,相机拍摄多个角度下(至少两个角度,推荐10~20个角度)的标定板图像(相机和标定板都可以移动),即可对相机的内外参数进行标定。下面介绍张氏标定法(以下也这么称呼)的原理。原理相机模型和单应矩阵相机标定,就是对相机的内外参数进行计算的过程,从而得到物体到图像的投影_相机-投影仪标定
文章浏览阅读2.2k次。文章目录Wayland 架构Wayland 渲染Wayland的 硬件支持简 述: 翻译一篇关于和 wayland 有关的技术文章, 其英文标题为Wayland Architecture .Wayland 架构若是想要更好的理解 Wayland 架构及其与 X (X11 or X Window System) 结构;一种很好的方法是将事件从输入设备就开始跟踪, 查看期间所有的屏幕上出现的变化。这就是我们现在对 X 的理解。 内核是从一个输入设备中获取一个事件,并通过 evdev 输入_wayland