原生js图片替换位置

原生js图片替换位置

 

 

<script>
function changeImg(id,img) {
document.getElementById(id).src =img;
}
</script>
<p><img src="https://www.baidu.com/img/baidu_jgylogo3.gif" id="baidu"/></p>
<p><img src="https://www.baidu.com/img/baidu_jgylogo3.gif" id="qihu"/></p>
<p>
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" onclick="changeImg('baidu',this.src)" />
<img src="https://p.ssl.qhimg.com/t01e92920a7b90351cc.png" onclick="changeImg('qihu',this.src)" />
</p>

 

同步修改ID方法

<script>
function changeImg(sclass,sid,img) {
tclass = getElementsByClass(sclass);
tclass[0].src =img;
tid =tclass[0].getAttribute("id");
tclass[0].setAttribute("id",'s'+sid);
}

function getElementsByClass(classnames){
var classobj = new Array();
var classint = 0;
var tags =document.getElementsByTagName("*");
for(var i in tags){
if(tags[i].nodeType == 1){
if(tags[i].getAttribute("class") == classnames){
classobj[classint] = tags[i];
classint++;
}
}
}
return classobj;
}
</script>
<p><img src="https://www.baidu.com/img/baidu_jgylogo3.gif" id="baidu" class="baidu"/></p>
<p><img src="https://www.baidu.com/img/baidu_jgylogo3.gif" id="qihu" class="qihu"/></p>
<p>
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" onclick="changeImg('baidu','12',this.src)" />
<img src="https://p.ssl.qhimg.com/t01e92920a7b90351cc.png" onclick="changeImg('baidu','13',this.src)" />
<img src="https://p.ssl.qhimg.com/t01e92920a7b90351cc.png" onclick="changeImg('qihu','23',this.src)" />
</p>

 

 

 

 

微信小程序 es6-promise.js封装请求 处理异步进程

下载es6-promise.min.js存放在utilslibs中

在utils中创建Promisify.js文件

Promisify.js文件代码

 

var Promise = require('libs/es6-promise.min')

function Promisify(fn) {
return function(obj = {}) {
return new Promise((resolve, reject) => {
obj.success = function(res) {
resolve(res)
}
obj.fail = function(res) {
reject(res)
}
fn(obj)
})
}
}

module.exports = {
Promisify: Promisify
}

 

使用方法

import { Promisify } from '../../utils/Promisify';
const request = Promisify(wx.request);

request({
url: '',
method: 'GET',
data: {
type:'page',
module:'contact'
},
header: {
'content-type': 'application/x-www-form-urlencoded',
'Accept': 'application/json'
},
})
.then(function (res) {
that.setData({
items: res.data
})
}

 

 

 

 

微信小程序错误码说明

 

-1 系统繁忙
0 请求成功
40001 验证失败
40002 不合法的凭证类型
40003 不合法的OpenID
40004 不合法的媒体文件类型
40005 不合法的文件类型
40006 不合法的文件大小
40007 不合法的媒体文件id
40008 不合法的消息类型
40009 不合法的图片文件大小
40010 不合法的语音文件大小
40011 不合法的视频文件大小
40012 不合法的缩略图文件大小
40013 不合法的APPID
40014 不合法的access_token
40014 不合法的access_token
40015 不合法的菜单类型
40016 不合法的按钮个数
40017 不合法的按钮个数
40018 不合法的按钮名字长度
40019 不合法的按钮KEY长度
40020 不合法的按钮URL长度
40021 不合法的菜单版本号
40022 不合法的子菜单级数
40023 不合法的子菜单按钮个数
40024 不合法的子菜单按钮类型
40025 不合法的子菜单按钮名字长度
40026 不合法的子菜单按钮KEY长度
40027 不合法的子菜单按钮URL长度
40028 不合法的自定义菜单使用用户
41001 缺少access_token参数
41002 缺少appid参数
41003 缺少refresh_token参数
41004 缺少secret参数
41005 缺少多媒体文件数据
41006 缺少media_id参数
41007 缺少子菜单数据
42001 access_token超时
43001 需要GET请求
43002 需要POST请求
43003 需要HTTPS请求
44001 多媒体文件为空
44002 POST的数据包为空
44003 图文消息内容为空
45001 多媒体文件大小超过限制
45002 消息内容超过限制
45003 标题字段超过限制
45004 描述字段超过限制
45005 链接字段超过限制
45006 图片链接字段超过限制
45007 语音播放时间超过限制
45008 图文消息超过限制
45009 接口调用超过限制
45010 创建菜单个数超过限制
46001 不存在媒体数据
46002 不存在的菜单版本
46003 不存在的菜单数据
40029 登录多次导致code重复/appid和secret对应不上,不是同一个小程序

 

PHP发送小程序模板消息函数

 

 

function send_template_message($code,$formid,$time,$name,$mobile,$info){
$color = '#e3e3e3';
$templateid = '';//模板ID
$openid = getOpenid($code);//openid
$data_arr = array(
'keyword1' => array( "value" => $time, "color" => $color),
'keyword2' => array( "value" => $name, "color" => $color),
'keyword3' => array( "value" => $mobile, "color" => $color),
'keyword4' => array( "value" => $info, "color" => $color)
);
$post_data = array (
"touser" => $openid,
"template_id" => $templateid,
"page" => "/pages/index/index", // 点击模板消息后跳转到的页面,可以传递参数
"form_id" => $formid,
"data" => $data_arr,
"emphasis_keyword" => "keyword2.DATA" // 需要强调的关键字,会加大居中显示
);
$url = "https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=".getAccessToken();
$data = urldecode(json_encode($post_data));
if( empty( $url ) ){
return ;
}
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);
if( $data != '' && !empty( $data ) ){
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json', 'Content-Length: ' . strlen($data)));
}
curl_setopt($ch, CURLOPT_TIMEOUT, 15);//超时时间
$res = curl_exec($ch);
curl_close($ch);
return $res;
}

 

 

 

PHP获取小程序openid函数

 

 

function getOpenid($code){
$appid = '';
$secret = '';
$curl = curl_init();
$url='https://api.weixin.qq.com/sns/jscode2session?appid='.$appid.'&secret='.$secret.'&js_code='.$code.'&grant_type=authorization_code';
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_HEADER, false);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
$data = curl_exec($curl);
curl_close($curl);
$data = json_decode($data);
$data = get_object_vars($data);
return $data['openid'];
}

 

 

PHP获取小程序access_token函数

 

 

function getAccessToken(){
$appid = '';
$secret = '';
$url='https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='.$appid.'&secret='.$secret;
$html = file_get_contents($url);
$output = json_decode($html, true);
$access_token = $output['access_token'];
return $access_token;
}

 

 

 

curl发送数据函数

使用curl发送post或者get数据

$data是一个数组

小程序中,$data数组需进行处理urldecode(json_encode($data));

function http_request( $url, $data = '', $timeout = 5 ){
if( empty( $url ) ){
return ;
}
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);
if( $data != '' && !empty( $data ) ){
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json', 'Content-Length: ' . strlen($data)));
}
curl_setopt($ch, CURLOPT_TIMEOUT, 15);//超时时间
$res = curl_exec($ch);
curl_close($ch);
return $res;
}

 

 

 

wx-promise-request的使用方法

开源地址:

https://github.com/zhengjunxin/wx-promise-request

wx-promise-request 是对微信小程序wx.request方法的异步封装。

下载wx-promise-request.js

复制到小程序中

在需要使用的js文件中这样操作

import {
request,
setConfig
} from '../../utils/wx-promise-request';
import Promise from 'bluebird';

setConfig({
Promise
})

request({
url: '',
method: 'GET',
data: {
type: 'list',
module: 'wechat/news'
},
header: {
'content-type': 'application/x-www-form-urlencoded',
'Accept': 'application/json'
},
})

.then(function (res) {
console.log(res.data)
}
)

 

webfont字体,免费在线字体

webfont(等线字体+思源字体)

下载地址:   https://wdjacms.pipipan.com/fs/16922972-297844075

 

css部分代码

@charset "utf-8";
/*
字体使用例子
*/
@font-face {font-family: 'webfont';
src: url('../webfont/webfont.eot'); /* IE9*/
src: url('../webfont/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../webfont/webfont.woff') format('woff'), /* chrome、firefox */
url('../webfont/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('../webfont/webfont.svg') format('svg'); /* iOS 4.1- */
}

body{ font-size:14px; font-family:"webfont"; color:#666;}