微信逻辑笔记2

周大胖子 · 发表于 2020-5-28 17:07:13

================1. 如何在微信小程序中使用iconfont
1.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:[1,2,3];
3.在页面上循环调用该组件
<view wx:for="{{shoparr}}" wx:key="vo">
<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">
<image class ="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
例子： <image class ="shop-img" mode="widthFix" src="{{img}}" />
=================================6. 关于瀑布流
不得不说：我也是第一次使用瀑布流，居然是用在这个小程序里 -。-
直接上循环，代码就是两个ul 的意思
<!-- <view class="shoparr-box">
<view class="shoparr-box-left">
<view wx: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" >
<view wx: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:

复制代码

周大胖子 · 发表于 2020-6-4 16:55:36

防止遗漏的笔记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.1 session_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

复制代码