HTML + CSS + 小程序+js教程
HTML + CSS + 小程序+js
小程序显示富文本
{htmlSnip}}">
{order_list[0]['policy']}}"> 小程序js改变navigationBarTitleText
wx.setNavigationBarTitle({title: '特价专区'})
日期转换时间戳
v=this.data.timessa;//日期
//日期转时间戳
var repTime = v.replace(/-/g, '/');
var timeTamp = Date.parse(repTime)/1000;//转换成时间戳，1000是去掉后面时间，只要日期
获得Storage缓存的值
wx.getStorageSync('userInfo');
生成小程序二维码
//生成小程序二维码
public function erwm()
{global $_GPC;global $_W;$appid = 'wx395ccc3bb775986d';$secret = '7fd6e1399823dc2f3ee8f722dc52b270';//获得openid$url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$appid&secret=$secret";$ch = curl_init();curl_setopt($ch, CURLOPT_URL, $url);curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);$output = curl_exec($ch);curl_close($ch);$jsoninfo = json_decode($output, true);$accesstoken = $jsoninfo['access_token'];// 准备进入小程序的参数//$param = json_encode(array("path" => "pages/member/exchange/index", "width" => 150));//构建请求二维码参数//path是扫描二维码跳转的小程序路径，可以带参数?id=xxx//width是二维码宽度$qcode ="https://api.weixin.qq.com/wxa/getwxacode?access_token=$accesstoken";$param = json_encode(array("path" => "pages/index/index","width" => 200));//POST参数$result = $this->httpRequest( $qcode, $param,"POST");//file_put_contents('dade.png',$result);//echo $result;die;//生成二维码$realpath =str_replace('\\', '/',__DIR__.'/img/'.'123.png');//保存路径$puth = "/www/wwwroot/lpzxsc.510show.com/sc/addons/ewei_shopv2/plugin/exchange/img/".time().rand(100000,999999).'.png';// echo $puth;die;//$base64_image ="data:image/jpeg;base64,".base64_encode($result);file_put_contents($puth,$result);return $puth;
}
//请求
function httpRequest($url, $data='', $method='GET'){$curl = curl_init();curl_setopt($curl, CURLOPT_URL, $url);curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, 0);curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, 0);curl_setopt($curl, CURLOPT_USERAGENT, $_SERVER['HTTP_USER_AGENT']);curl_setopt($curl, CURLOPT_FOLLOWLOCATION, 1);curl_setopt($curl, CURLOPT_AUTOREFERER, 1);if($method=='POST'){curl_setopt($curl, CURLOPT_POST, 1);if ($data != ''){curl_setopt($curl, CURLOPT_POSTFIELDS, $data);}}curl_setopt($curl, CURLOPT_TIMEOUT, 30);curl_setopt($curl, CURLOPT_HEADER, 0);curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);$result = curl_exec($curl);curl_close($curl);return $result;
}
小程序
获得openid
wx.login({success: function (res) {if (res.code) {//这里存储了appid、secret、token串 var url = 'https://api.weixin.qq.com/sns/jscode2session?appid=' + app.globalData.appid + '&secret=' + app.globalData.AppSecret + '&js_code=' + res.code + '&grant_type=authorization_code';wx.request({url: url,data: {},method: 'GET', success: function (res) {console.log(res)}});} else {console.log('获取用户登录态失败！' + res.errMsg)}}
});获得用户信息wx.getUserProfile({desc: '用于完善会员资料',success: (res) => {console.log(res)}})
css样式
宽，高,字体大小
width: 750rpx;
height: 350rpx;
font-size: 20rpx;
行高
Line-height:10rpx;
文字居中
Text-align:center;
边框
3.border-top:设置顶部边框。
4.border-right：设置右边框。
5.border-bottom：设置底边框。
6.border-left：设置左边框。
边框
border-top: 3rpx solid #f00000;
border-right:3rpx solid #f00000;
border-bottom:3rpx solid #f00000;
border-left:3rpx solid #f00000;
底部有一行
border-bottom：3rpx solid #f000000;
背景颜色
background-color: #f00000;
左右下角弧度
border-bottom-left-radius: 30%;
border-bottom-right-radius: 30%;
4角弧度，圆角
border-radius: 100%;
border-radius: 100rpx;
居中
justify-content: center;
靠右显示
position: absolute;
right: 50rpx;
上空格
margin-top: 20rpx;
容器
display: flex;最外
flex:1;里面一个
flex:2;里面两个
居中
justify-content: center;
上右下左
margin: 0 0 0 0;
padding: 10rpx 30rpx 10rpx 30rpx;
margin-left: 20rpx;左
margin-right: 16rpx;右
改变主轴的方向
flex-direction: row;//横向
flex-direction: row-reverse; 横向，右往左输出
flex-direction: column-reverse;//排，垂直，倒输出3 2 1，原1 2 3
flex-direction: column;垂直输出
\1. flex-wrap换行
flex-wrap: nowrap;默认不换行
flex-wrap: wrap;换行左到右，下
flex-wrap: wrap-reverse;反转换行右到左，上
justify-content对齐方式，在主轴上对齐
justify-content: flex-start;左对齐，顶部
justify-content: flex-end;右对齐，底部
justify-content: center; 居中
justify-content: space-between;两端对齐
justify-content: space-around; 两侧间隙相等，两端对齐
\3. 交叉轴对齐
align-items: flex-start;交叉轴的起点对齐
align-items: flex-end; 交叉轴的终点对齐
align-items: center; 交叉轴的中点对齐
底部购买
.detall{
width: 100%;
height: 80rpx;
Line-height:20rpx;
Text-align:center;
color: #fff;//字体
background: #fc0404;//背景
position: fixed;//底部
bottom: 0;//底部0开始
}
.detall text{
Line-height:80rpx;
Text-align:center;
}
小程序组件,视图
数据绑定js
data: {
aa:123
},
onLoad(){
console.log(this.data.aa);//打印123
}
数据绑定html
{{aa}}输出
for循环
data: {
//aa:[1,2,3,4,5,6,7],
users:[
{id:1,name:‘aa’},
{id:2,name:‘aa’},
{id:3,name:‘aa’},
]
},
{{item.id}}—{{item.name}}
if判断
66
22
33
模板
data: {
//aa:[1,2,3,4,5,6,7],
users:{id:1,ids:2,ida:6},
},
{{users.id}}
{{users.ids}}
{{users.ida}}
引用导出到外面模板
{{users.id}}
{{users.ids}}
{{users.ida}}
Import需要引用，不可以嵌套模板过来
aa文件
{{users.id}}
{{users.ids}}
{{users.ida}}
include相当复制过来，可以嵌套模板过来
冒泡，点击事件
点击我
Js文件
dji(){
console.log(111);
},
dji2(){
console.log(1112);
}
html
b：粗体
i:斜体
s：删除线
sub：下标
sup：上标
无序列表
- 看书
- 好看
有序列表
- 大
- 大
定义列表
- 中国
- 中国好
- 中国
- 中国好
表格
| id | 姓名 |
|---|---|
| 1 | 大得 |
| 2 | 大得 |
input
属性：type有email（邮箱），tel（手机号），number（数字），search（搜索框），range（自由拖动滑块），time（时间），date（日期），datetime（时间日期），month（年/月），week（年，月）
视频
音频
css
基础
字体中间加一条横线：text-decoration:line-through;
隐藏：hidden和display:none;
color:颜色
background:背景
font-size:字体大小
行高：Line-height:10px;
width：宽
heigth：高
border:设置边框
对齐：text-align
光标：cursor
文字阴影：text-shadow
盒子缩放：zoom
文字溢出：text-overflow
盒子模型：box-sizing
去除ul，li原点
ul，li{list-style:none}
外边框：margin
居中margin：0 auto
内边框：padding
布局属性：display 块block 行inline
滚动条：overflow:scroll;
浮动：float
清除浮动：float，overftow：hiddem
.c{clear:both}
定位：position
相对定位：relative
绝对定位：absolute
静态定位：static
固定定位：fixed
上：top 左：left 右：right 下：bottom
在第几层
z-index:1
阴影
box-shadow：1px 1px 1px 1px；
圆角
4边：border-radius：5px 5px 5px 5px；
弹性布局flex
disploy:flex
flex-wrap:wrap
盒子对齐：justify-content：盒子对齐
align-content：空隙
align-items:空隙
透明度
opacity：0.1；
js
遍历
for（var i in arr）{console.log(i，arr[i])
}
点击事件
onclick="copyText()"
转换字符
转字符串：string（a）；
转int：parseInt（a）;
转浮点：parseFloat（a）；
获得节点
getElementById(id名称)； id=“name”
下面两个返回数组（所有）
getElementsByTayName(标签名)
getFlementsByClassName(类名)
getElementsByName(name名称) name=“names”
queryselectorAll（css选择器） 返回数组所有
document.queryselectorAll（‘tbody tr’） ；返回tbody 的所有tr
早期DOM
document.body dody所有
document.forms 访问所有表单
document.forms[1]
document.formName 的name.name（表单name）
如document.f1.username = “”; 不能为空