微信逻辑笔记2
================1. 如何在微信 小程序中使用iconfont1.1 在iconfont中找到自己需要的图标并加入创建的项目中 (iconfont网址链接：https://www.iconfont.cn) 并且下载；
1.2 将下载解压后的文件创建并放置在 niming[项目根目录名]/assets/fonts/
1.3 将iconfont.css改为iconfont.wxss，小程序中css样式文件后缀为wxss
1.4 在index.wxss （哪个页面要用哪个就引用）中引用@import '/assets/fonts/iconfont.wxss';
1.5 在index.wxml 中 直接写 <icon class="iconfont iconshangyishou"></icon> // 这个后面的 class再 demo 最上面选项的 第二个tabBe页
参考链接：https://www.jianshu.com/p/d478234954c8
================2. 我把获取用户数据换了个页 结果居然不显示了
==========================3. 全局背景色 怎么设置设置为淡灰色
hsla(0,0%,97%,.98);
最后我发现了 page 这是一个默认的wxss 样式：
我直接在index.page 里这么写
page｛
background-color: hsla(0,0%,97%,.98);
height: 100%;
font-size: 32rpx;
line-height: 1.6;
｝
==========================4. 做一个商品组件并且向其中传值
1.先建一个组件
参考我自己的笔记：http://www.huake94.top/da/forum.php?mod=viewthread&tid=1314&extra=page%3D1
2.建完组件在page 里 搞个data里面存放数组：
shoparr:;
3.在页面上循环调用该组件
<view wx:for="{{shoparr}}" wx:key="vo">
<!-- {{item}} -->
<shop></shop>
</view>
4. 说到 主页面与 组件之间的通信 我就比较懵逼了 ；
4.1 第一步：在index.wxml 中[这个item 是个对象]
<shop shopdata="{{item}}"></shop>
在index.js 的 data 里 搞个数组 去循环数组里嵌套的是 object[与组件属性对应]
4.2 第二步： 在组件shop 里 这么写：
/**
* 组件的属性列表
*/
properties: {
shopdata:{
type: Object,
value:{}
}
},
/**
* 组件的初始数据
*/
data: {
},
pageLifetimes: {
// 组件所在页面的生命周期函数
show: function () {
// 这就可以接到 前台传递来的值
console.log(this.data)
let shop = this.data;
this.setData(shop.shopdata)
},
},
4.3 渲染到组件表面 shop.wxml：
<view class="shop">
<imageclass ="shop-img" mode="widthFix" src="{{img}}"/>
<view class="shop-text">
<view class="shop-title"> {{title}} </view>
<view class="shop-address"> {{address}} </view>
<view class="shop-price"> {{price}} </view>
</view>
</view>
==================================5. 图片变形 高度不自适应？
image组件有个默认宽度300px、高度225px ；
给图片同时设置宽高（小程序中最好每个标签元素都设置上宽高）
2，小程序中image标签有个属性 mode（图片裁剪、缩放的模式）
参考文献：https://www.cnblogs.com/listen9436/p/11207815.html
参考文献： https://developers.weixin.qq.com/miniprogram/dev/component/image.html
例子： <imageclass ="shop-img" mode="widthFix" src="{{img}}"/>
=================================6. 关于瀑布流
不得不说：我也是第一次使用瀑布流，居然是用在这个小程序里 -。-
直接 上循环，代码 就是两个ul 的意思
<!-- <view class="shoparr-box">
<view class="shoparr-box-left">
<viewwx:for="{{shoparr}}" wx:key="index">
<view wx:if="{{index%2==0}}">
<shop class="shop-box shop-box-left" shopdata="{{item}}"> </shop>
</view>
</view>
</view>
<view class="shoparr-box-right" >
<viewwx:for="{{shoparr}}" wx:key="index">
<view wx:if="{{index%2==1}}">
<shop class="shop-box shop-box-right" shopdata="{{item}}"> </shop>
</view>
</view>
</view>
</view> -->
=========================================== 7. 微信小程序swiper整体高度怎么调节
===========================================8. 关于 微信小程序 照着官方抄 也报错：Component is not found in path
这个 我没有解决，我发现我安装的 npm 里 有这个东西 ： 后来 我使用了第三项代替 ，为啥 照着微信官方复制都找不到 微信真坑
"usingComponents": {
"mp-icon": "/miniprogram_npm/weui-miniprogram/icon/icon",
"shop": "/shareany/shop",
"mp-dialog": "/miniprogram_npm/weui-miniprogram/dialog/dialog"
}
============================================================ 9. 我在 商标列表，商品列表 用了组件组件是一个整体，那详情页怎么跳？
9.1 构思： 长期其实用的是 id 值系列 跳转页面；嗯 那我用这个跳转试试 ；
在这里 我有个默认的意思： 一个申请号 只对应一个商标
9.1.1 那问题就来了 ，怎么 传值呢？ 哪怕只传ID ? 或者格式必须 json?
这个我昨天解决了用的是 url?a=1 这样子的方式传值的
============================================================ 10.如何在微信里搞个旋转的动画；
10.1
wxml :
<view class="container">
<view class="usermotto" animation="{{ani}}">
<text class="user-motto">{{motto}}</text>
</view>
<button bindtap='start'>动画</button>
</view>
wxss:
Page({
data: {
motto: 'Hello World',
},
start:function(){
var animation = wx.createAnimation({
duration: 4000,
timingFunction: 'ease',
delay: 1000
});
animation.opacity(0.2).translate(100, -100).step()
this.setData({
ani: animation.export()
})
}
})
参考网址： https://www.jb51.net/article/149632.htm
==============================================================11 如何使用弹窗提示框
1. 引入：
"usingComponents": {
"mp-dialog": "/miniprogram_npm/weui-miniprogram/dialog/dialog"
}
2. 搞页面：
<!-- 弹出框 -->
<mp-dialog title="提示" show="{{showOneButtonDialog}}" bindbuttontap="tapDialogButton" buttons="{{oneButton}}">
<view>{{errMsg}}</view>
</mp-dialog>
3.搞控制与显示用的 数据
data: {
showOneButtonDialog: false,
errMsg:null,
oneButton: [{
text: '确定'
}],
},
4. 搞一个点击用的函数[ 由于我这是简单的只有一个按钮的弹窗，所以只有一个功能按钮， 那就是关闭弹窗 ]
/**
*弹窗关闭按钮
*/
tapDialogButton(e) {
this.setData({
showOneButtonDialog: false
})
},
5. 来来来 开始用 ：
啥啥啥方可生:function()
{
this.setData({
showOneButtonDialog: true ,
errMsg:"请输入用户名和密码"
})
}
============================================================12 如何使用旋转等待小点点
1. 引入：
"usingComponents": {
"mp-loading": "/miniprogram_npm/weui-miniprogram/loading/loading"
}
2. 搞页面：
<!-- 加载框 圆圈小点转动 -->
<mp-loading wx:if="{{showLoading}}" type="circle"></mp-loading>
3.搞控制与显示用的 数据
data: {
showLoading:false,
},
4. 在使用中显示或者关闭：
// 打开加载提示
selfSearch.setData({
showLoading:true
})
================================================================== 13 微信小程序中如何监听软键盘的input 确认或搜索事件
利用： input 的bindconfirm 微信小程序自定义属性
页面：<input type="number" class="r-h-input" name="input" bindconfirm="subHe" placeholder="请输入 申请号" />
wxs 里： 写个 subHe:function(e){}
==============================================================14 显示搜索结果数
1. wxml:
<view class="search-res" wx:if="{{showTip}}">
<!-- 搜索结果提示 -->
<text> 搜索到 <text class="search-res-num"> {{resCount}} </text> 条结果 > </text>
</view>
2. wxss:
.search-res{
font-size:12px;
color:#999;
vertical-align: bottom;
margin-left: 20rpx;
}
.search-res-num{
font-size:14px;
color:#666;
vertical-align: bottom;
}
3.wxs:
防止遗漏的笔记1有很大一部 重复
1.
open-type: 写在button 的属性一栏 表示微信开放能力；
具有以下功能：
值 说明 最低版本
contact 打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，具体说明 1.1.0
share 触发用户转发，使用前建议先阅读使用指引 1.2.0
getPhoneNumber 获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息，具体说明 1.2.0
getUserInfo 获取用户信息，可以从bindgetuserinfo回调中获取到用户信息 1.3.0
launchApp 打开APP，可以通过app-parameter属性设定向APP传的参数具体说明 1.9.5
openSetting 打开授权设置页 2.0.7
feedback 打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容 2.1.0
2.
session_key 的使用
2.1session_key 主要用作加密解密[我只找到了解密] ；
相关链接 ：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/signature.html#%E6%96%B9%E5%BC%8F%E4%B8%80%EF%BC%9A%E5%BC%80%E5%8F%91%E8%80%85%E5%90%8E%E5%8F%B0%E6%A0%A1%E9%AA%8C%E4%B8%8E%E8%A7%A3%E5%AF%86%E5%BC%80%E6%94%BE%E6%95%B0%E6%8D%AE
2.2 使用方法：
2.2.1 把示例代码下载 粘贴需要的部分到 项目中 ；
2.2.2 把 WXBizDataCrypt /ErrorCode修改文件名 ，并且修改引用方式 ，带入项目【例如tp5 带入tp5的项目】
2.2.3 把demo 的代码 再带入 项目文件中；
2.3 理解 ：
一般是这么个逻辑 ： 第一次请求的时候，判断用户登录状态，最好判断场景值 ，然后获得 openid 和 session_key , 存起来
然后 再后台 自己再搞个自己的mysession,两个session 没啥关系;
mysession 用于自己登录状态的判断；
session_key用于对微信接受api 数据时解密 ；
关于判断session_key 是否过期：
其实并不是所有请求 都是跟微信互动 ；
我觉得要跟微信互动 调用微信的api 才有用
wx.qy.checkSession({
success: function(){
//session_key 未过期，并且在本生命周期一直有效
},
fail: function(){
// session_key 已经失效，需要重新执行登录流程
wx.qy.login() //重新登录
}
})
3. 如何在app.js 中对全局变量进行赋值？微信的this 指向有问题
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
if (res.code) {
// console.log(this)
let selfapp= this;
//发起网络请求 这个登录会产生code 并不是 做登录这个动作，而是扫描后直接发送
wx.request({
url: 'https://t.huake94.top/addcen',
data: {
code: res.code
}
,success (e) {
// console.log(e.data)
//得到的token 是e.data.token; 将其赋值全局
selfapp.globalData.token = e.data.token;
}
})
} else {
console.log('登录失败！' + res.errMsg)
}
}
})
=============================================================================0426 笔记================================================
4. 怎么自定义 顶部呢？
参考链接： https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html#%E9%85%8D%E7%BD%AE%E9%A1%B9
其实直接在app.json 里配置
{navigationStyle:"custom"}
5.如何引入 公共头部与底部？
一种是组件式；一种是page式 【用这个】；
5.1 在app.json 中 的page 中写：
"pages/module/footer"
5.2 在出现的module/footer.wxml中写： 代码
5.3 在需要的位置，例如index.wxml 中写入代码
<include src="../module/footer.wxml"/>
6. 如何用到 自定义都图标，导航样式
6.0 让我惊叹微信的神奇吧 ；啥坑爹的操作文档；
6.1 第一步：打开cmd，在小程序的根目录，初始化npm
执行代码 ：npm init
name 项目名称；version 项目的版本号；description 项目的描述信息；entry point 项目的入口文件；
test command 项目启动时脚本命令（npm test）；git repository Git 地址
keywords 关键词；author 作者；license 项目要发行的时候需要的证书
6.2 第二步： 执行命令，进行安装 npm 微信样式的包
执行代码 ：npm install --save weui-miniprogram
6.3 第三步： npm 进行构建
操作方式：微信开发者工具==》工具（开发工具导航栏）==》构建npm
6.4 第四步： npm构建进行本地设置
微信开发者工具==》详情==》本地设置==》使用npm模块（勾选）
6.5 第五步： 在app.wxss引入全局样式
@import './miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';
6.6 第六步： 实例demo展示
6.6.1首先在页面的 json 文件加入 usingComponents 配置字段
{
"usingComponents": {
"mp-dialog": "/miniprogram_npm/weui-miniprogram/dialog/dialog"
}
}
6.6.2 去页面里 丢代码去
<mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{[{text: '取消'}, {text: '确认'}]}}">
<view>test content</view>
</mp-dialog>
6.7 注意事项 ： 需要的就引入 不需要的 不要瞎进入 比方说 我需要图标 只需要这么写
{
"usingComponents": {
"mp-icon": "/miniprogram_npm/weui-miniprogram/icon/icon"
}
}
然后跑到：https://developers.weixin.qq.com/miniprogram/dev/extended/weui/icon.html找个类 就行了
参考链接：https://blog.csdn.net/weixin_40802058/java/article/details/104182352
============================================================================================================
7. 怎么 才能让头部 的搜索框 和 右侧平高呢？
// 获取右侧胶囊按钮的位置信息 单位是px
let s = wx.getMenuButtonBoundingClientRect();
console.log(s);
然后拿到之后 做这么些操作：
1.在需要配置的wxml里 写
<view class="header-box" style="padding-top:{{mySize.headerBoxPaddingTop}}px;">
<view class="head" id="header-input">
<text class="head-address" style="line-height:{{mySize.headAddressLineHeight}}px;" >快捷搜索</text>
<input type="text" class="keyword-input" id="keyword-input" style="height:{{mySize.keywordInputHeight}}px;" name="keyword" />
</view>
</view>
<view class="jia-header-box"style="height:{{mySize.jiaHeaderBoxHeight}}px;">
</view>
2.在page 里：
data: {
motto: '你好 陌生人',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo'),
mySize:{
headerBoxPaddingTop:'',
keywordInputHeight:'',
headAddressLineHeight:'',
jiaHeaderBoxHeight:''
}
},
3. 在onload 里
// 获取右侧胶囊按钮的位置信息
let s = wx.getMenuButtonBoundingClientRect();
console.log(s);
// 设置左侧的
this.setHeader(s);
4. 然后写一个function
// 设置左侧搜索框
,setHeader:function( json )
{
this.setData({
mySize:{
headerBoxPaddingTop:json.top,
keywordInputHeight:json.height-2,
headAddressLineHeight:json.height-2,
jiaHeaderBoxHeight:json.bottom +6
}
})
}
==============================================================================================================
8. getElementById不能用，那微信小程序时如何选择demo 节点的?
这先pass
===============================================================================================
9. 在微信小程序中 使用include 引入的公共头部，底部 到index/wxml 的css/js 写在哪?
9.1 答： 写在 index.wxss 与 index.js 中 ； 写在foot 的相关文件中并不生效 -。-
9.2后来我把底部和头部换成了 组件 这样更方便点 ，
但是问题是我底下3个链接 也会跟着动 ，而不是 底下不动 上面不动 只动中间那种，应该怎么搞？
9.3 后来发现 有一个叫做 tabBar 的东西 -.-
"tabBar": {
"color": "#000",//文字默认颜色
"selectedColor": "#959394",//文字被选中时的颜色
"backgroundColor": "#f0f0f0",//背景色
"borderStyle": "white",//TAB栏边框颜色
"list": [
{
"pagePath": "pages/index/index", //导航页面
"iconPath": "pages/images/home_b.png",//默认图片路径
"selectedIconPath": "pages/images/home.png",//被选中时的图片路径
"text": "首页"
},
{
"pagePath": "pages/components/mine/mine",
"iconPath": "pages/images/mine_b.png",
"selectedIconPath": "pages/images/mine.png",
"text": "帮助"
}
]
},
备注：如果发现 调试里是三个 但是显示是两个，那一定是index页面出错了；
可以参考百度都链接： https://jingyan.baidu.com/article/414eccf6ba98696b421f0a6e.html
9.4 如果我部分页面 不需要 tabBar 应当如何设置；
载入页面，在页面onload 直行隐藏方法：
onLoad: function (options) {
// 隐藏底部的 tabBer
wx.hideTabBar({
animation : false
})
},
如何在别的页面再显示：
<button bindtap="toother" data-href="../index/index"> 跳转首页测试tabBer </button>
然后别的页面需要，则在别的页面里 写：
===================================================================================
10. 微信小程序有默认的padding 和maragin 嘛 ？
这一点 我居然没找到正确的解决方法，甚至连input 有没有1px 的边宽 我都不知道
=====================================================================================
11. 微信小程序自定义对象属性的获取
11.1 <view class="foot-item" bindtap="toother"data-href="../myinfo/myinfo">
<text class="foot-item-text">我的</text>
</view>
11.2 , toother:function(e)
{
// 跳转时，去拿自定义属性href的值
var href = e.currentTarget.dataset.href;
console.log(e.currentTarget);
wx.navigateTo({
url: href
})
}
11.3 注意对象自定义属性之前要加data-
参考链接：https://blog.csdn.net/Sindyue/article/details/100742629
页:
[1]