小程序 getphonenumber_小程序入门,看这一篇就够了!
文章为实战中踩坑经历,以及解决方案。同时是自己的一个项目回顾,在这里分享给大家,希望能帮助到大家。文章内代码需要左右滑动噢~
登录授权
授权(基本信息,手机号码 )必须使用小程序原生的的button组件,然后指定open-type 后通过回调才能拿到用户信息。代码入下:
index.wxmlclass= class= "getUserInfo" lang= 授权登录 class= class= "getPhoneNumber" bindgetphonenumber= 立即绑定 index.jspage({ // ... data: { hasUserInfo: false, canIUse: wx.canIUse('button.open-type.getUserInfo'), userInfo: {}, getUserInfo: false, getPhone: false, hasAuth: false }, onLoad: async function () { var that = this; // 查看是否授权 wx.getSetting({ success: function (res) { if (res.authSetting['scope.userInfo']) { wx.login({ success: loginRes => { // 获取到用户的 code 之后:loginRes.code wx.getUserInfo({ success: async function (res) { // 这里处理业务逻辑 } }) } }) } else { // 用户没有授权 } } }); }, bindGetUserInfo: function (e) { // 需要什么信息都从e中拿到 以下部分业务逻辑 if (e.detail.userInfo) { //用户按了允许授权按钮 var that = this; // 获取到用户的信息 wx.login({ success: async res => { const aUserModel = new UserModel(); const params = { code: res.code, encryptedData: e.detail.encryptedData, iv: e.detail.iv } const { data } = await aUserModel.login({ ...params }) if(data.roles){ // do ... } if (data.mobile) { // do ... } } }); //授权成功后,通过改变 isHide 的值,让实现页面显示出来,把授权页面隐藏起来 that.setData({ isHide: false }); } else { //用户按了拒绝按钮 wx.showModal({ title: '警告', content: '拒绝授权,您将无法使用小程序', showCancel: false }); } }, getPhoneNumber: async function (e) { if (e.detail.encryptedData) { //用户按了允许授权按钮 const aUserModel = new UserModel(); const params = { userId: userInfo.id, encryptedData: e.detail.encryptedData, iv: e.detail.iv } // do ... } else { //用户按了拒绝按钮 wx.showModal({ title: '警告', content: '拒绝授权,您将无法使用小程序', showCancel: false }) } }, // ...})复制代码
路由
路由跳转的各个方法可以去官网学习,这里提遇到的坑,navigateTo路由跳转最多只能10层,所以使用的时候需要考虑是不是确定需要历史记录。为什么要这么说呢。场景:一个列表页面(如下图),用户的档案是可以修改的,如果用navigateTo跳转(/page/archivesEdit?id=1923XXXX),修改保存用navigateTo(/page/archivesList),这样来回编辑跳转10次就不让点击跳转了。
解决:思考那我用2个redirectTo 行不行?redirectTo是关闭当前历史记录跳转到下一页面。造成了我跳转到修改页面点击微信自带的返回是直接跳过列表页面跳转到首页。这个时候测试小姐姐就又要提bug单了……
完美姿势:就是用navigateTo和navigateBack。我再编辑保存的时候返回用navigateBack返回。这样小程序的路由栈就一会在2-3层之间。当然有时候在列表页面会遇到要重新条用接口,这时候路由跳转提供了几个重要的钩子函数onShow,onHide,我们可以在onShow的时候可以条用一下列表的接口。
这2个钩子函数足够我们简单的跳转,更复杂的场景下可以通过存Storage这种存取参数来返回到上一个页面进行操作,感觉不是优雅,但是没有好的办法解决了。
Storage
场景:storage有2种方式获取,当你直接wx.getStorageSync('xxx')获取一个id,去请求接口的可能是获取不到就已经发送请求了,导致出现bug。因为wx.getStorageSync('xxx')是异步的,我们可以利用 async/await去方便的使用:
onLoad: async function (options) { const editListParams = await wx.getStorageSync('editListParams') this.findReportDetails(editListParams)}复制代码
webView
webview不是在某个页面使用的,当时我以为是类似iframe这种东西嵌入到页面。正确的使用态度是新建一个page页面,然后跳转到这个page去使用。例如跳转到小程序关联的公众号文章:
other.wxml<navigator url="/pages/webView/webView" hover-class="none">跳转到webViewnavigator>webView.wxml<web-view src="https://mp.weixin.qq.com/s/xxxx">web-view>复制代码
request
微信自带的网络下的request,虽然能拿来就用,如果不封装就会造成代码冗余。大家可自行参考如下封装
ajax.jsimport { baseURL } from '../config/interfaceURL' // baseUrlclass AJAX { AJAX ({ url, methods = 'GET', data = {} }) { return new Promise((resolve, reject) => { this.request(url, resolve, reject, methods, data) }) } request (url, resolve, reject, methods, data) { wx.request({ url: baseURL + url, method: methods, data: data, header: { 'content-type': 'application/json' }, success: res => { const code = res.statusCode.toString() if (code.startsWith('2')) { resolve(res) } else { reject() const errorMessage = res.data.message AJAX.showError(errorMessage) } }, fail: err => { reject() AJAX.showError("网络异常,请稍后重试!") } }) } static showError (errorMessage) { wx.showToast({ title: errorMessage, icon: 'error', duration: 2000 }) } static serializeLink (obj) { // 序列化get请求 let temp = '?' for (let index in obj) { if(obj.hasOwnProperty(index)){ temp += (index + '=' + obj[index] + '&') } } return temp.substr(0, temp.length - 1) }}export default AJAX// model层调用UserModel.jsimport AJAX from '../utils/AJAX'export class UserModel extends AJAX { // 小程序授权登陆 login (params) { return this.AJAX({ url: `/service/api/users/applet/login`, data: params, methods: 'POST' }) }}// control调用index.jsasync onLoad (options){ const aUserModel = new UserModel() const params = { code: loginRes.code, encryptedData: res.encryptedData, iv: res.iv } const { data } = await aUserModel.login({ ...params }) // 其他}复制代码
npm生态以及第三方ui框架
直接通过初始化的微信小程序项目里面没有package.json文件。所以在使用npm install xxx 是没有卵用。所以我们要自己在文件夹根目录下执行npm init 。这时候才能通过微信开发者工具构建npm,构建成功会生成一个目录。推荐用有赞的vant小程序版,社区较活跃,使用起来不会有很多坑。
双向绑定
对于习惯使用vue的开发者来说,少了这个v-model语法糖。在处理表单的双向绑定会显得比较蛋疼。所以还是有必要说下小程序里面的双向绑定是怎么样的。
file:index.jsPage({ data: { list: [] }, onLoad: function (options) { // do ... }, onInput (e) { let value = e.detail.value let temp = e.target.dataset.name.split(',') let tempKey = temp[1] let tempIndex = temp[0] let tempSubIndex = temp[2] let targetKey = `list[${tempIndex}].children[${tempSubIndex}].${tempKey}` this.setData({ [targetKey]: value }) }})file:index.wxmlfor= <view class="td" style="height: {{ 100 / item.children.length}}%;"> <input placeholder-style="color:#ccccccc;" type="text" placeholder="未填写" value="{{subItem.testResult}}" data-name="{{idx}},testResult,{{index}}" bindinput="onInput"/> view>block>复制代码
下载图片和下载图片授权
这里场景是下载一个固定的静态资源图片,网络图片需先配置download域名才能生效,方法如下:
savePhoto () { const _this = this; wx.getImageInfo({ src: '/static/images/home/Qr.png', success: function (res) { wx.saveImageToPhotosAlbum({ filePath: res.path, success (result) { _this.setData({ show: false }); wx.showToast({ title: '保存成功', icon: 'success', duration: 2000 }) }, fail (err) { if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") { wx.openSetting({ success (settingdata) { if (settingdata.authSetting['scope.writePhotosAlbum']) { _this.savePhoto() } else { wx.showToast({ title: '获取权限失败,无法保存图片', icon: 'success', duration: 2000 }) } } }) } } }) } }) }复制代码
保存图片也是需要授权的,看代码就完事了。
其他
textarea 在ios上表现会有padding值,这个就坑了。我采用要不全是textarea或者全是input 这种去实现表单的填写,其他样式问题也蛮多的,有点ie的味道,多用flex float去解决一些差异吧~
文章每个点都是开发小程序的时候遇到的问题,本人能力有限,欢迎大家提出自己的问题。小程序坑还是蛮多的,而且写博客也蛮难得,码字不易,觉得有用的话点个在看吧!
原文作者:Rolan
原文地址:http://www.wxapp-union.com/article-5650-1.html
-好课来袭-
「人人都会微信小程序实战进阶」
腾讯大牛手把手教学,0基础快速上手小程序
更多课程优惠信息请添加助教微信
(微信:TencentNext)
附赠福利:
0.02元掌握云开发技巧、
让你的小程序开发又快又好!
【NEXT公开课】
小程序云开发技巧
小程序 getphonenumber_小程序入门,看这一篇就够了!相关推荐
- shell语法入门看着一篇就够了
BASH流程 bash开头 #!/bin/sh #!/bin/bash #!/usr/bin/awk #!/bin/sed #!/usr/bin/tcl #!/usr/bin/expect #< ...
- bilibili小电视桌面天气站(esp8266+微信小程序控制)超详细,看这一篇就够了
目录 编辑 一.前言 二.教程 1.项目结构 2.材料清单 3.模型设计 4.电路设计 5.代码设计 以下是资料链接 一.前言 这个项目是今年6月份就在开始做的,但是中途由于实习等一些事情耽搁了,一 ...
- 关于uni-app入门看完这篇就够了
关于uni-app的入门 前言 这是一篇关于uni-app入门的文章,也是我对uni-app的总结与归纳,刚开始的时候在这个平台上面找寻同类型的文章的时候发现讲的都很片面不怎么详细,所以就写了一篇关于 ...
- 真的,关于 Kafka 入门看这一篇就够了
作者 | cxuan 责编 | 刘静 Kafka 系列的阶段性总结(万字长文,做好准备,建议先收藏再看) 初识 Kafka 什么是 Kafka Kafka 是由 Linkedin 公司开发的,它是一个 ...
- QT入门看这一篇就够了——超详细讲解(40000多字详细讲解,涵盖qt大量知识)
目录 一.Qt概述 1.1 什么是Qt 1.2 Qt的发展史 1.3 Qt的优势 1.4 Qt版本 1.5 成功案例 二.创建Qt项目 2.1 使用向导创建 2.2 一个最简单的Qt应用程序 2.2. ...
- python自动操作微信_Python+Appium 自动化操作微信入门看这一篇就够了
简介 Appium 是一个开源的自动化测试工具,支持 Android.iOS 平台上的原生应用,支持 Java.Python.PHP 等多种语言. Appium 封装了 Selenium,能够为用户提 ...
- python控制手机微信_Python + Appium 自动化操作微信入门看这一篇就够了
简介 Appium 是一个开源的自动化测试工具,支持 Android.iOS 平台上的原生应用,支持 Java.Python.PHP 等多种语言. Appium 封装了 Selenium,能够为用户提 ...
- Docker 入门看这一篇就够了,万字详解!
容器简介 什么是 Linux 容器 Linux容器是与系统其他部分隔离开的一系列进程,从另一个镜像运行,并由该镜像提供支持进程所需的全部文件. 容器提供的镜像包含了应用的所有依赖项,因而在从开发到测试 ...
- mybatis-plus学习(一)——入门看这一篇就够了
文章目录 前言 准备工作 1.需要准备的SQL 2.一个简单的maven项目 3.配置文件如下 4.建立一个简单的实体和mapper 5.简单的helloworld测试程序 基本使用 通用mapper ...
- Docker 入门看这一篇就够了!
原文:cnblogs.com/clsn/p/8410309.html 作者:惨绿少年 1 容器简介 1.1 什么是 Linux 容器 Linux容器是与系统其他部分隔离开的一系列进程,从另一个镜像运行 ...
最新文章
- 在asp.net(C#)中怎么获得一个目录的大小?
- 交互式数据包处理程序 Scapy 入门指南
- 【软考-软件设计师】总线结构
- 并发工具类(一)等待多线程完成的CountDownLatch
- iOS-数据持久化-第三方框架FMDB的使用
- CentOS7安装Python3.4 ,让Python2和3共存
- bond4 交换机配置_CentOS 网卡配置bond4(LACP)
- 2018-07-06笔记(LNMP配置)
- MySQL 基本信息的查询(初始化配置信息 my.ini)
- 斯坦福大学深度学习公开课cs231n学习笔记(9)softmax分类和神经网络分类代码实现
- iPhone iPad游戏应用开发视频教程
- 词法分析器(分析C语言)
- 关于sybase数据库的连接
- sql server安全管理-新建登录名-sql和混合身份验证模式#windows域和用户名的查找#不是有效的 Windows NT 名称。请给出完整名称: <域\用户名>。
- 【杂谈】什么文章可以给有三AI投稿?你能得到什么
- 数据表为什么又叫透明表?
- python制作qq登录界面_使用Python编写一个QQ办公版的图形登录界面
- 内存管理 slub算法
- 【计算机毕业设计】基于springboot的景区旅游网站
- svchost.exe(LocalSystemNetworkRestricted)占用内存以及CPU
热门文章
- Python-程序模块化
- [] __nw_connection
- java常用的空对象 null
- 【WiFi密码破解详细图文教程】ZOL仅此一份 详细介绍从CDlinux U盘启动到设置扫描破解-破解软件论坛-ZOL中关村在线...
- LeetCode: Maximum Subarray
- linux 开机默认启动windows系统时间,Windows和Linux双系统批改默认启动项、超时时间...
- 逆向破解之160个CrackMe —— 007
- 旅游规划(双权连通图)
- Mac OS X安装 ffmpeg
- 【BZOJ-2400】Spoj839Optimal Marks 最小割 + DFS