学习微信小程序及知识占及v-if与v-show差别
注意点:
一、接口调用方式:
getOpenid: function () {
var that = this;
return new Promise(function (resolve, reject) {
wx.login({
success: function (res) {
//code 获取用户信息的凭证
//调用接口获取登录凭证(code)。通过凭证进而换取用户登录态信息,
// 包括用户的唯一标识(openid)及本次登录的会话密钥(session_key)等。
// 用户数据的加解密通讯需要依赖会话密钥完成。
if (res.code) {
//请求获取用户openid
wx.request({
url: that.globalData.ctxUrl + "/wx/onLogin",
data: { "code": res.code },
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: function (res) {
wx.setStorageSync("useropenid", res.data.body.openid);
wx.setStorageSync("platformId", res.data.body.platformId);
var res = {
status: 200,
data: res.data.body.openid
}
// 在外面调用app.getOpenid时就会将res传到then方法的第一个参数里面
resolve(res);
}
});
} else {
console.log('获取用户登录态失败!' + res.errMsg)
reject('error');
}
}
})
});
}
先在app.js文件里写一个公共方法调wx.login接口获取code,然后将这个code传后后端,后端会通过这个code调用微信接口,然后返回userid和platformId,然后存到缓存里,
在调其它接口的时候就需要传这个userid和platformId等。
app.getOpenid().then(function(res) {
if (res.status == 200) {
var userId1 = wx.getStorageSync("useropenid");
var platformId1 = wx.getStorageSync('platformId');
that.setData({
userId: wx.getStorageSync("useropenid"),
platformId: wx.getStorageSync('platformId')
}), wx.request({
url: app.globalData.ctxUrl + '/wx/partOfHomeDetails',
data: {
"userId": userId1,
"platformId": platformId1,
"photo": photo,
"userName": userName
},
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: function (result) {
wx.setStorageSync("userid", result.data.body[0].userId);
that.setData({
list: result.data.body
})
}
}) 小程序调接口通过token的方法如下:
每次推送触发之前都会检查一下是否过期,如果过期,重新执行一下后端的 getAccessToken 的方法去获取
code换openId的话
小程序每次打开的时候都执行一下onLogin的方法拿code
然后把这个code传给后端,后端返回openid等值,后端再把相关的openId+session_key生成一个Token再返回给小程序(也就是你再调一个接口它返给你token)
然后小程序的所有请求把这个Token带上访问就可以了
相关的话可以去了解下JWT
以上是微信小程序如何调用后端接口的实例
二、可以用block标签上加判断条件,block本身不会显示在页面上
三、v-if与hidden属性区别,hidden每一次要渲染,标签会存在,但是相当于设置了display:none,
而v-if只有条件满足才渲染,否则不渲染,如果不渲染标签是不会显示在页面上的
v-if
vs v-show
v-if
是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if
也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
相比之下,v-show
就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
一般来说,v-if
有更高的切换开销,而 v-show
有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show
较好;如果在运行时条件很少改变,则使用 v-if
较好。
四,用wx:for-item可以改变遍历时取值时不用item.id了,可以用i.id了
五、template模板
5,
六、知识点网站
https://github.com/CruxF/WXsmallProgram
https://github.com/CruxF/WXsmallProgram
https://wendux.github.io/dist/#/doc/flyio/wx
需要了解的网站:
https://www.v2ex.com/t/519999?p=1
一个mpvue项目中基于flyio实现的可更新cookie的拦截器
https://juejin.im/post/5c11d2b0e51d4514b3526a62
了解下flyio(fly.js)
七、
1、上线流程:
(微信小程序如果用原生的开发,上线时先将所有代码保证最新代码后点小程序的右上角的上线,需要输入版本号啥的,在管理员的版本管理里就会有你刚提交的那个版本了,然后管理员会点提交审核,审核通过后下面就会出现打包发布的按钮,管理员就可以发布了)
需要,build之后点上传,然后在小程序管理后台的版本管理那里提交审核,审核通过了就可以发布上线了
上小程序的编辑器里可以看到上传那个按
在微信小程序的官网里有版本管理,可以点开看下
某一个帐号可以让多个人管理,可以在成员管理里添加成员的微信号
2:如果想让其它人使用自己的项目,可以让另一方在新建项目里点进去,然后会出来这样的条码,然后你扫下另一方就可以进来你的项目了
八、用token调后端接口
也可以用cookie去操作和更新token的:
cookie既可以在响应拦截器里根据后端提示过期再请求然后更新也行,也可以自己在本地校验是否过期,直接在请求发起前就更新cookie
九、比较重要的几个api调用的微信接口
wx.login():: 调用接口获取登录凭证(code)。
通过凭证进而换取用户登录态信息,包括用户的唯一标识(openid)及本次登录的会话密钥(session_key)等。
code | string | 用户登录凭证(有效期五分钟)。开发者需要在开发者服务器后台调用 code2Session,使用 code 换取 openid 和 session_key 等信息 |
wx.getAccountInfoSync():获取当前帐号信息,用它可以取到appid
const accountInfo = wx.getAccountInfoSync()
console.log(accountInfo.miniProgram.appId) // 小程序 appId
console.log(accountInfo.plugin.appId) // 插件 appId
console.log(accountInfo.plugin.version) // 插件版本号, 'a.b.c' 这样的形式
wx.canIUse():判断小程序的API,回调,参数,组件等是否在当前版本可用。
使用 ${API}.${method}.${param}.${options}
或者 ${component}.${attribute}.${option}
方式来调用
wx.canIUse('button.open-type.getUserInfo')
wx.authorize:提前向用户发起授权请求。
调用后会立刻弹窗询问用户是否同意授权小程序使用某项功能或获取用户的某些数据,但不会实际调用对应接口。如果用户之前已经同意授权,则不会出现弹窗,直接返回成功。
注意:下面的scope下有很多属性分别代表不同的授权,最后调用的方法要与scope下的属性相对应,如微信运动授权,就调scope下的微信运动属性,授权成功后再调运动的方法
// 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.record" 这个 scope
wx.getSetting({
success(res) {
if (!res.authSetting['scope.record']) {
wx.authorize({
scope: 'scope.record',
success() {
// 用户已经同意小程序使用录音功能,后续调用 wx.startRecord 接口不会弹窗询问
wx.startRecord()
}
})
}
}
})
wx.getSetting():获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限。
(就是查看它的授权信息,哪些功能授权了,哪些功能没授权,如果已经授权了,就直接调用经授权的方法,如果没有授权就调用wx.authorize()进行授权,授权后再调用功能方法)
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
//scope它下面有很多属性分别代表不同的权限,这里的scope.userInfo是指调用户信息的权限
// 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo
wx.setStorageSync("userPhoto", res.userInfo.avatarUrl)
wx.setStorageSync('nickName', res.userInfo.nickName);
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
wx.setNavigationBarTitle:为每个页面设置title文件
wx.getUserInfto:获取用户信息
例如:像下面这样点击 “获取用户信息” 按钮
在这个按钮里绑上getuserinfo方法,在getuser里就可以取到用户信息了
这时点击获取用户信息按钮时就会调getuser方法,里面的事件对象下面就会返回用户相关信息了
十:标签组件,常用的标签
image:里加上mode这个属性后就是宽度固定,高度自动
scroll-view:这个标签组件可以用在滚动到底端时加载下一页的功能,要给page{height:100%}
这里的loading是控制下拉刷新连续触发的功能
list.push这块做的目的是下拉刷新后之前的数据还要
学习微信小程序及知识占及v-if与v-show差别的更多相关文章
- 与大家分享学习微信小程序开发的一些心得
因为我也才开始学习微信小程序不久,下文也是现在的一时之言,大家有不同的想法也可以在评论里共同交流讨论,希望文章能给大家提供一点点帮助. 最近接触到了一些前端框架,像Vue.js,React,发现小程序 ...
- 一个C#程序员学习微信小程序路由的笔记
路由大家应该都知道,在微信小程序也是有的,毕竟它是单页面应用程序.在WeChat中有五种跳转方式,分别是wx.switchTab.wx.reLaunch.wx.redirectTo.wx.naviga ...
- 新人学习微信小程序开发之框架篇
大家好我是智哥,一名专注于前端领域的一名码农. 咱们今天主要来说说微信小程序, 最近一段时间微信群里的小程序,小游戏各种分享是突然一下子就爆发了,现在来看小程序作为微信的重磅功能无疑又是下一个风口.咱 ...
- 一个C#程序员学习微信小程序的笔记
客户端打开小程序的时候,就将代码包下载到本地进行解析,首先找到了根目录的 app.json ,知道了小程序的所有页面. 在这个Index页面就是我们的首页,客户端在启动的时候,将首页的代码装载进来,通 ...
- 微信小程序基础知识
一.基本目录结构 app.js 定义app入口 app.json 定义页面配置 index.js 页面中的事件和监听 index.wxml 定义布局文件 1.app.json配置基本信息 { “pag ...
- 微信小程序基础知识笔记
微信小程序笔记 文件构成 全局文件 app.json 小程序全局配置文件,必要,自动生成 app.js 小程序入口JS文件,一般只需申明全局变量.处理生命周期以及版本升级即可,必要 app.wxss ...
- 从零开始学习微信小程序
1.微信公众号和小程序的区别 公众号可以基于html5.vue.react.anguar开发,小程序只能用小程序开发语言. 小程序更接近于原生app. 借助jssdk调用手机功能强大. 开始: 2.创 ...
- 学习微信小程序
1.从小程序指南文档开始看起:小程序指南 2.开发者工具下载:小程序开发工具
- 微信小程序基本知识
逻辑实现 1 使用动态数据展示列表(可以考虑使用wx:for属性配合动态数组渲染全部列表项,以减少WXML页面的代码量) eg: <view class='listGroup' wx:for= ...
随机推荐
- 2018.09.24 bzoj1016: [JSOI2008]最小生成树计数(并查集+搜索)
传送门 正解是并查集+矩阵树定理. 但由于数据范围小搜索也可以过. 我们需要知道最小生成树的两个性质: 不同的最小生成树中,每种权值的边出现的个数是确定的 不同的生成树中,某一种权值的边连接完成后,形 ...
- file.write(str),file.writelines(sequence)
file.write(str)的参数是一个字符串,就是你要写入文件的内容.file.writelines(sequence)的参数是序列,比如列表,它会迭代帮你写入文件.
- python编码(四)
一.预备知识 字符集 1, 常用字符集分类 ASCII及其扩展字符集作用:表语英语及西欧语言.位数:ASCII是用7位表示的,能表示128个字符:其扩展使用8位表示,表示256个字符.范围:ASCII ...
- (水题) Div 3 -- SGU -- 105
链接: http://vj.acmclub.cn/contest/view.action?cid=168#problem/E 时限:250MS 内存:4096KB 64位IO格式:%I ...
- springmvc elf8848
刚开始觉得孔浩讲得好,之后觉得开涛讲得好,现在觉得elf8848讲得好.其实只是自己学习的各个阶段 孔浩:环境搭建,做了个基础的CRUD 开涛:讲了Controller(不该看),注解,数据绑定,请求 ...
- What if you are involved in an automobile accident in the US
What if you are involved in an automobile accident in the US With increasing Chinese tourists and vi ...
- 曲演杂坛--Update的小测试
今天偶然想起一个UPDATE相关的小问题,正常情况下,如果我们将UPDATE改写成与之对应的SELECT语句,其SELECT查询结果应与UPDATE的目标表存在一对一的关系,例如: 对于UPDATE语 ...
- 构建NetCore应用框架之实战篇(七):BitAdminCore框架登录功能源码解读
本篇承接上篇内容,如果你不小心点击进来,建议从第一篇开始完整阅读,文章内容继承性连贯性. 构建NetCore应用框架之实战篇系列 一.简介 1.登录功能完成后,框架的雏形已经形成,有必要进行复习. 2 ...
- .net core Swagger
Startup中的 ConfigureServices //注册 Swagger services.AddSwaggerGen(sg => { sg.SwaggerDoc("refu ...
- linq to sql 查找所有开票金额大于回款金额的项目
查找所有开票金额大于回款金额的项目 TB_Projects 项目表 TB_Recipts 发票表 TB_Finances 回款表 TB_Projects 一对多 TB_Recipts TB_Proj ...