HTML + CSS + 小程序+js教程

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判断

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：上标

无序列表

• 看书
  • 好看

有序列表

1. 大
2. 大

定义列表

中国

中国好

中国

中国好

表格

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