安卓和小程序体验

小程序体验

安卓版本体验 安卓体验

一.小程序结构

目录结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

文件	必需	作用
app.js	是	小程序逻辑
app.json	是	小程序公共配置
app.wxss	否	小程序公共样式表

一个小程序页面由四个文件组成，分别是：

文件类型	必需	作用
js	是	页面逻辑
wxml	是	页面结构
json	否	页面配置
wxss	否	页面样式表

二.开发过程

1.tabbar页面创建注册

tabbar页面就是我们小程序下方导航栏所对应的页面。

创建页面之后，app.json界面会自动在“page”中注册。但是tabbar还需要自己去设计。可以设置未点击和已点击的图标以及字体。

"tabBar": {"color": "#C0C4CC",//未点击字体颜色"selectedColor": "#FF7F00",//点击后字体颜色"borderStyle": "black","backgroundColor": "#ffffff","list": [{"pagePath": "pages/index/index",//导航对应的页面"iconPath": "images/tabbar/daka.png",//未点击时显示的图标"selectedIconPath": "images/tabbar/daka_point.png",//点击时显示的图标"text": "打卡"//导航栏文字},{"pagePath": "pages/faxian/faxian","iconPath": "images/tabbar/faxian.png","selectedIconPath": "images/tabbar/faxian_point.png","text": "发现"},{"pagePath": "pages/user/user","iconPath": "images/tabbar/wo.png","selectedIconPath": "images/tabbar/wo_point.png","text": "我的"}]},

2.单独页面设计

如果不想要微信自带的顶部导航栏的样式，可以设置取消顶部导航栏。

方法：

{"navigationStyle": "custom",//设置取消原生导航栏
}

下拉刷新的开启，有时候需要下拉页面刷新当前页面的数据。开启方法：

{"enablePullDownRefresh": true,//刷新页面数据"backgroundTextStyle": "dark",//设置刷新加载的颜色"usingComponents": {}
}

3.刘海屏适配

因为我自己是刘海屏，其他像是水滴屏如果不进行刘海屏适配而又去掉了原生顶部栏。那样会出现组件被遮拦的情况。

解决方法

wx.getSystemInfo({success: e => {t.TopBar = e.statusBarHeight; //状态栏高度}
})
将获取到的顶部栏的值在页面上固定到顶部即可解决问题

进入正题

三.用户信息获取

授权获取用户信息，这个是用户授权获取用户的头像昵称等相关信息

 wx.getSetting({success: res => {if (res.authSetting['scope.userInfo']) {// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框wx.getUserInfo({success: res => {// 可以将 res 发送给后台解码出 unionIdthis.globalData.userInfo = res.userInfoconsole.log(res.userInfo)// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回// 所以此处加入 callback 以防止这种情况if (this.userInfoReadyCallback) {this.userInfoReadyCallback(res)}}})}}})

用户信息仅作为展示作用，重要的是解析用户的openid，这个是用户个人id的凭证。

wx.login({success: res => {var that=this// 发送 res.code 到后台换取 openId, sessionKey, unionIdwx.request({url: 'url',//后台链接地址data: {code: res.code},method: 'POST',header: {//'content-type': 'application/json' // 默认值'Content-Type': 'application/x-www-form-urlencoded'},success: function (res) {console.log('appjs获取openid')console.log(res.data);that.globalData.openid = res.data},fail: function (res) {console.log(".....fail.....");}})}})

到此就完成了微信用户的授权

考研打卡app小程序第二篇（微信用户授权）相关推荐

微信小程序第二篇实战
title: 微信小程序第二篇实战 date: 2018-03-08 02:33:00 tags: WeChat category: WeChat description: 微信小程序第二篇实战效果 ...
python编程可视化小程序_人人都可以写的可视化Python小程序第二篇：旋转的烟花...
兴趣是最好的老师枯燥的编程容易让人放弃,兴趣才是最好的老师.无论孩子还是大人,只有发现这件事情真的有趣,我们才会非常执着的去做这件事,比如打游戏.如果编程能像玩游戏一样变得有趣,我相信很多人就特别愿 ...
使用python完成的一个烟花小程序-人人都可以写的可视化Python小程序第二篇：旋转的烟花...
兴趣是最好的老师枯燥的编程容易让人放弃,兴趣才是最好的老师.无论孩子还是大人,只有发现这件事情真的有趣,我们才会非常执着的去做这件事,比如打游戏.如果编程能像玩游戏一样变得有趣,我相信很多人就特别愿 ...
人人都可以写的可视化Python小程序第二篇：旋转的烟花
兴趣是最好的老师枯燥的编程容易让人放弃,兴趣才是最好的老师.无论孩子还是大人,只有发现这件事情真的有趣,我们才会非常执着的去做这件事,比如打游戏.如果编程能像玩游戏一样变得有趣,我相信很多人就特别愿 ...
python画静态烟花_人人都可以写的可视化Python小程序第二篇：旋转的烟花
兴趣是最好的老师枯燥的编程容易让人放弃,兴趣才是最好的老师.无论孩子还是大人,只有发现这件事情真的有趣,我们才会非常执着的去做这件事,比如打游戏.如果编程能像玩游戏一样变得有趣,我相信很多人就特别愿 ...
微信小程序开发工具取消用户授权
仅给和我一样粗心的人提示一下,大神不要见怪. 之前没仔细研究小程序开发工具,对界面不熟悉.开发中对小程序做了个授权,然后想取消程序的授权,在手机上可以直接操作,但是在开发工具上不行. 其实,直接把缓存 ...
微信小程序简单实现获取用户授权、用户头像并保存到本地
文章目录一.获取用户授权二.获取用户头像并保存三.实现效果一.获取用户授权以index单页面示例, 1.在index.js中的Page-data注册canIUse,用于调用微信开放接口申请用 ...
微信小程序第二篇：关于评论，和回复，以及再回复的实现和思考。
首先,先贴一下效果图大概就是要做成这个样子.上面的实现完全靠js.数据是写在data中的死数据,这样我们就能先把前端需要的数据结构确定后,就只需要从后台取出数据,生成对应的格式就好了. 再次:先说一 ...
服务器客服获取小程序头像,微信小程序自动获取微信用户头像
Xml页面: css页面: .userinfo { margin-left: 48rpx; margin-top: 48rpx; width: 120rpx; height: 120rpx; back ...

考研打卡app小程序第二篇（微信用户授权）