当前位置：首页 > news >正文

HTML + CSS + 小程序+js教程

news 来源：原创 2024/11/1 20:08:35

HTML + CSS + 小程序+js

小程序显示富文本

<rich-text nodes="{{htmlSnip}}"></rich-text>
<rich-text nodes="{{order_list[0]['policy']}}"></rich-text>

小程序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;

}

小程序组件,视图

<view class = “bj">{{aa}}

数据绑定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判断

模板

data: {

//aa:[1,2,3,4,5,6,7],

users:{id:1,ids:2,ida:6},

引用导出到外面模板

Import需要引用，不可以嵌套模板过来

aa文件

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（年，月）

视频

<video src="movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
</video>

音频

<audio src="someaudio.wav">
您的浏览器不支持 audio 标签。
</audio>

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 = “”; 不能为空

网站编辑难做吗/湖南营销型网站建设

dede独立手机网站模板/郑州网站seo服务

ROS action客户端和服务端通信（Ubuntu ）

[附源码]计算机毕业设计网上鲜花购物系统Springboot程序

SpringBoot+Vue项目便捷洗衣服务平台

网格化微型空气质量站浅谈工作原理

uImage的制作工具mkimage详解(源码编译、使用方法、添加的头解析、uImage的制作)

Windows OpenGL ES 图像绿幕抠图

给出32位有符号整数，将这个整数翻转

Numpy入门[11]——生成数组的函数

【MyBatis源码分析】四、XML解析与核心对象的构建

WEB前端网页设计 HTML网页代码基础参数（二）

脉冲触发的触发器

MATLAB学习笔记（系统学习）

HTML + CSS + 小程序+js

小程序显示富文本

日期转换时间戳

获得Storage缓存的值

生成小程序二维码

小程序

css样式

容器

改变主轴的方向

底部购买

小程序组件,视图

for循环

if判断

模板

引用导出到外面模板

Import需要引用，不可以嵌套模板过来

include相当复制过来，可以嵌套模板过来

冒泡，点击事件

html

无序列表

有序列表

定义列表

表格

input

视频

音频

css

基础

外边框：margin

内边框：padding

定位：position

在第几层

阴影

圆角

弹性布局flex

透明度

js

遍历

点击事件

转换字符

获得节点

早期DOM

相关文章：