|
楼主 |
发表于 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
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
复制代码 |
|