精华内容
下载资源
问答
  • 前提:个人AppID无法获取手机号,需要先申请测试号 使用方法:将 button 组件 open-type 的值设置为 getPhoneNumber,当用户点击并同意之后,可以...小程序端wxml代码: <button open-type="getPhoneNumber" bin

    小程序授权登录,所有用户包括个人用户都可以获取:

    前端wxml只需给出一个按钮,

    <button bindtap="login">授权登录</button>

    js部分使用wx.getUserProfile和wx.login函数

    login(){
      wx.getUserProfile({
        desc: 'desc',
        success:info=>{
          wx.login({
            success:code=>{
              wx.request({
                url: 'http://www.xxx.com/api/login',
                method:"POST",
                data:{
                  nickName:info.userInfo.nickName,
                  avatarUrl:info.userInfo.avatarUrl,
                  code:code.code
                },
                success:res=>{
                  if(res.data.code != 200){
                    wx.showToast({
                      title: '登录失败',
                      icon:'error'
                    })
                    return
                  }
                  wx.setStorageSync('token', res.data.data)
                }
              })
            }
          })
        }
      })
    },

    获取用户信息和code码,将code传到后端,

    使用php和curl请求登录api获取openid和session_key用作手机号授权

    public function login(Request $request)
    {
        // 获取code
        $code = $request->input("code");
        // 获取昵称
        $nickname = $request->input("nickName");
        // 获取头像
        $img = $request->input("avatarUrl");
        // 从微信公众平台获得appid
        $appid = "xx";
        // 从微信公众平台获得secret
        $secret = "xx";
        // 发送请求换取openid和sessionkey
        $url = "https://api.weixin.qq.com/sns/jscode2session?appid=$appid&secret=$secret&js_code=$code&grant_type=authorization_code";
        // 暂使用file_get_contents()发送请求,你可以使用CURL扩展的形式实现
        $res = json_decode(file_get_contents($url), true);
        // 组装用户数据
        $info = [
            'nickname' => $nickname,
            'img'=>$img,
            'openid' => $res['openid'],
            'session_key' => $res['session_key']
        ];
        // 查询用户是否是第一次登录
        $user = Login::where("openid", $res['openid'])->first();
        // 判断
        if ($user) {
            return ['code' => 200, 'msg' => '已经注册过', 'data' => $user];
        }
        
        $data = Login::create($info);
        return ['code' => 200, 'msg' => '注册成功', 'data' => $data];
    }

    授权获取手机号: 个人AppID无法获取手机号,需要先申请测试号

    使用方法:将 button 组件 open-type 的值设置为 getPhoneNumber,当用户点击并同意之后,可以通过 bindgetphonenumber 事件回调获取到微信服务器返回的加密数据, 然后在第三方服务端结合 session_key 以及 app_id 进行解密获取手机号。

    微信官方文档:获取手机号 | 微信开放文档

    小程序端wxml代码:

    <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">
        手机号授权
    </button>

    js:

    getPhoneNumber (e) {
        let iv = e.detail.iv
        let encryptedData = e.detail.encryptedData
        let token = wx.getStorageSync('token')
        wx.request({
          url: 'http://www.xxx.com/api/getPhone',
          data:{
            iv,
            encryptedData,
            token
          },
          method:'POST',
          success:res=>{
              console.log(res)
          }
        })
    }

     注意:iv、 encryptedData是必要参数

    解密:

    
    //获取手机号
    public function getPhoneNumber(Request $request)
    {
        $params = $request->all();
        $user_id = (new Token())->chekToken($params['token']);
        try{
            //获取用户信息
            $user = User::where('id',$user_id)->first();
            $aesKey = base64_decode($user->session_key);
            $aesIV = base64_decode($params['iv']);
            $aesCipher = base64_decode($params['encryptedData']);
            $result = openssl_decrypt($aesCipher, "AES-128-CBC", $aesKey, 1, $aesIV);
            $phoneNumber = json_decode($result, true)['purePhoneNumber'];
            //更改手机号
            $user->phone = $phoneNumber;
            $user->save();
            return ['code' => 200,'msg' => 'ok'];
        }catch (\Exception $e){
            return ['code' => 400,'msg' => $e->getMessage()];
        }
     
    }

    这样就完成了

    展开全文
  • 微信小程序:bindtap uniapp:@click 函数传参事件 微信小程序: <view bindtap="click" data-id="id"></view> uniapp:<view @click="click(id)"></view> 函数接收参数 微信小程序:...

    点击事件
            微信小程序:bindtap

            uniapp:@click

    函数传参事件
            微信小程序: <view bindtap="click" data-id="id"></view>

            uniapp:<view @click="click(id)"></view>

    函数接收参数
            微信小程序: function(e){ this.setData({ currentId:e.currentTarget.dataset.id }) }

            uniapp:  function(id){ this.currentId = id }

    for循环:
            微信小程序:

            <view wx:for="{{currentList}}" wx:for-index="s_index" wx:for-item="s_item"></view>
            uni-app:

            <view v-for="(s_item,s_index) in currentList"></view>
            微信小程序可以不写wx:for-index和wx:for-item,默认为index和ite

    if判断:
            微信小程序:<view wx:if="{{isShow}}"></view>
            uni-app:<view v-if="isShow"></view>

    src动态接收图片:
            微信小程序:<image src="{{item.img}}"></image>
            uni-app:<image :src="item.img"></image>

    页面传参:
            微信小程序:<navigator url="/pages/live?id={{item.room_id}}"></navigator>
            uni-app:<navigator :url="'/pages/live?id=' + item.room_id"></navigator>
            两者接收参数都是在onLoad(options){}方法中获取,在此不多提及。

    全局数据定义:
            微信小程序:globalData:{baseUrl:"www.com"}
            uni-app:this.prototype.baseUrl = "https://www.ccc"

    全局数据调用:
            微信小程序:getApp().globalData.baseUrl

            uni-app:this.baseUrl

    数组拼接:
            微信小程序(ES5):this.setData({ list:this.data.list.concat(res.list) })
            uni-app(ES6):this.list = [...this.list,...res.list];

    阻止冒泡:
            微信小程序:<view catchtap="clickTab">我是按钮</view>
            uni-app:<view @click.stop="clickTab">我是按钮</view>

    api的差别(支付作栗子):
            微信小程序:wx.requestPayment({})
            uni-app:uni.requestPayment({})
            小程序的api在uni-app中只需要把wx替换成uni即可使用。

    跨界面获取选择的参数
            场景类似于填写表单时某个信息要跳转到其他页面选择数据后再返回,并在原填写表单页得到并展示刚才选择的数据,当然还有其他相关的问题能够运用该方法。
            微信小程序:通过getCurrentPages()获取页面栈,然后调用上n个页面的setData()方法,把数据存到上n个页面中。

    (转存)
     

    展开全文
  • wx小程序面试题整理

    2021-03-10 17:01:36
    wx小程序的项目结构 project.config.json  项目配置文件,用得最多的就是配置是否开启https校验; App.js  包含整个小程序的生命周期,错误监听、页面不存在监听等函数; APP.json  小程序的全局注册文件包含:...

    wx小程序的项目结构

    • project.config.json  项目配置文件,用得最多的就是配置是否开启https校验;
    • App.js  包含整个小程序的生命周期,错误监听、页面不存在监听等函数;
    • APP.json  小程序的全局注册文件包含:界面路径注册、tab注册、窗口表现等等
    • App.wxss  小程序的公共样式,引入iconfont等;
    • pages  存放页面文件,每个页面结构如下;
    • index.json (配置当前页面标题和引入组件等);
    • index.wxml (页面结构);
    • index.wxss (页面样式表);
    • index.js (页面的逻辑,请求和数据处理等);

    小程序的生命周期:

    在这里插入图片描述

    页面的生命周期函数:

    在这里插入图片描述

    有哪几种方式可以跳转页面?

    navigateTo: 保留当前页面,跳转到应用内的某个页面。
    navigateBack:关闭当前页面,返回上一页面或多级页面。
    redirectTo:关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
    switchTab:跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。
    reLaunch: 关闭所有页面,打开到应用内的某个页面。

    wx小程序通信方式

    1. 父子组件通信
    • 父传子
    //父组件 wxml 使用变量="{{变量}}"语法向子组件传递一个数据
      <child obj="{{obj}}"></child>
    
    //子组件 js 使用properties来接受参数,接下来可以在wxml中正常使用该数据
    Component({
      /**
       * 组件的属性列表
       */
      properties: {
        obj: Object
      },
    })
    
    • 子传父
    //子组件 发布一个事件,携带上要传递的参数
    // wxml
    <button bindtap="childClick">子传父</button>
    //js 按钮点击事件完成向父组件发布事件,注意组件方法定义在methods中
      methods: {
        childClick() {
          this.triggerEvent('childMethods', this.data.obj)
        },
      }
    
    //父组件  
    //wxml 绑定监听事件方法
      <child obj="{{obj}}" bind:childMethods="getIndex"></child>
    //js 获取方法中的参数
      getIndex(e){
        console.log(e.detail);
      },
    
    1. 路由传参
    //当前页面
    wx.navigateTo({url:`/page/my/my?id=${this.data.id}`})
    //跳转的页面接收参数
    
    onLoad: function (options) {
        console.log(options);
     },
    
    
    
    1. 全局通信

      定义一个globalData,将数据挂载到 app.js,这种方式在开发中很常用。通过getApp(),我们能够在任何一个页面内访问到app实例。

    //app.js
    App({
      globalData:{
        list:[]
      }
    })
    
    //组件使用
    const app = getApp()
    Page({
      onLoad(){
        app.globalData.list.push({
          id: 10
        })
      }
    })
    
    1. storage

    storage并不是作为通信的主要方式。storage 主要是为了缓存数据,并且最多只能存储10M的数据,我们应该合理使用storage

    wx.setStorageSync('timestamp', Date.now())
    wx.getStorageSync('timestamp')
    wx.removeStorageSync('timestamp')
    

    5.页面通信 getCurrentPages

    getCurrentPages() 获取当前页面栈,数组中第一个元素为首页,最后一个元素为当前页面

    元素为一个对象,里面存放着页面的信息,包括route(页面路径)、options(onLoad拿到的参数)、method、data等

    Page({
      onLoad(){
        let pages = getCurrentPages()
        let lastPage = pages[pages.length-2]
        lastPage.setData({
          list: []
        })
      }
    })
    
    1. eventBus

    通过发布订阅模式注册事件和触发事件进行通信

    简单实现

    class EventBus{
      constructor(){
        this.task = {}
      }
      on(name, cb){
        if(!this.task[name]){
          this.task[name] = []
        }
        typeof cb === 'function' && this.task[name].push(cb)
      }
      emit(name, ...arg){
        let taskQueen = this.task[name]
        if(taskQueen && taskQueen.length > 0){
          taskQueen.forEach(cb=>{
            cb(...arg)
          })
        }
      }
      off(name, cb){
        let taskQueen = this.task[name]
        if(taskQueen && taskQueen.length > 0){
          let index = taskQueen.indexOf(cb)
          index != -1 && taskQueen.splice(index, 1)
        }
      }
      once(name, cb){
        function callback(...arg){
          this.off(name, cb)
          cb(...arg)
        }
        typeof cb === 'function' && this.on(name, callback)
      }
    }
    export default EventBus
    

    使用

    //app.js
    import EventBus from '/util/EventBus'
    wx.$bus = new EventBus()
    
    //page1.js
    Page({
      onLoad(){
        wx.$bus.on('add', this.addHandler)
      },
      addHandler(a, b){
        console.log(a+b)
      }
    })
    
    //page2.js
    Page({
      onLoad(){
        wx.$bus.emit('add', 10, 20)
      },
    })
    
    1. selectComponent

    使用选择器选择组件实例节点,返回匹配到的第一个组件实例对象,类似 Vue 的 ref

    //wxml
    <my-component id="mycomponent" list="{{list}}"></my-component>
    
    //js
    Page({
      onLoad(){
        let mycomponent = this.selectComponent('#mycomponent')
        mycomponent.setData({
          list: []
        })
      }
    })
    
    1. selectOwnerComponent

    选取当前组件节点所在的组件实例(即组件的引用者),返回它的组件实例对象,类似 Vue 的 $parent

    Component({
      attached(){
        let parent = this.selectOwnerComponent()
        console.log(parent)
      }
    })
    

    wx小程序里边的双向绑定和vue的双向绑定有什么区别?

    vue中在表单元素中使用v-model语法糖绑定data中的数据,当数据改变后触发响应式,视图更新,实现双向数据绑定;

    小程序中数据改变,需要调用input事件,获取value (e.target) ,使用this.setData()语法实现。

    微信小程序与H5的区别?

    • 运行环境不同(小程序在微信运行,h5在浏览器运行);
    • 开发成本不同(h5需要兼容不同的浏览器);
    • 获取系统权限不同(系统级权限可以和小程序无缝衔接);
    • 应用在生产环境的运行流畅度(h5需不断对项目优化来提高用户体验);

    在你开发小程序的过程中遇到过什么坑? 你是怎么解决的?

    wx.navigateTo无法打开页面
    一个应用同时只能打开5个页面,请避免多层级的交互方式,或使用wx.redirectTo
    tabBar设置不显示
    tabBar的数量少于2项或超过5项都不会显示;
    tabBar写法错误导致不显示;
    tabBar没有写pagePath字段(程序启动后显示的第一个页面)
    本地资源无法通过wxss获取
    background-image:可以使用网络图片,或者base64,或者使用标签

    bindtap和catchtap的区别?

    相同点:都是作为点击事件函数,点击时触发。
    
    不同点:bindtap是不会阻止冒泡事件的,catchtap是阻止冒泡的
    

    微信小程序,为什么使用js闭包?

    因为微信小程序处理函数是异步执行的,异步执行造成的结果可能和预期的不合,如果函数中有循环,最后的结果都一样,所以使用js闭包可以解决这个问题。

    微信小程序原理?

    微信小程序采用JavaScript、wxml、wxss三种技术进行开发,与现有前端开发的区别:
    JavaScript的代码是运行在微信APP中的,因此一些h5技术的应用需要微信APP提供对应的API支持;
    wxml微信自己基于xml语法开发的,因此在开发时只能使用微信提供的现有标签,html的标签是无法使用的;
    wxss具有css的大部分特性,但并不是所有都支持没有详细文档(wxss的图片引入需使用外链地址,没有body,样式可直接使用import导入)。
    微信的架构,是数据驱动的架构模式,它的UI和数据是分离的,所有的页面更新,都需要通过对数据的更改来实现。
    小程序功能分为webview和APPservice,webview主要用来展示UI,appservice用来处理业务逻辑、数据及接口调用。它们在两个进程中进行,通过系统层JSBridge实现通信,实现UI的渲染、事件处理。

    分析下微信小程序的优劣势?

    优点:

    无需下载,通过搜索和扫一扫就可以打开。
    良好的用户体验:打开速度快。
    开发成本要比App要低。
    安卓上可以添加到桌面,与原生App差不多。
    为用户提供良好的安全保障。小程序的发布,微信拥有一套严格的审查流程, 不能通过审查的小程序是无法发布到线上的。
    缺点:

    限制较多。页面大小不能超过1M。不能打开超过5个层级的页面。
    样式单一。小程序的部分组件已经是成型的了,样式不可以修改。
    推广面窄,不能分享朋友圈,只能通过分享给朋友,附近小程序推广。其中附近小程序也受到微信的限制。
    依托于微信,无法开发后台管理功能。

    展开全文
  • 微信小程序获取dom节点常出现问题也就是无法获取到! 一、微信小程序获取dom节点: 1.创建选择器 var query = wx.createSelectorQuery(); 2.查询 集合:query.selectAll('.traffic').boundingClientRect(()=&...

    微信小程序获取dom节点常出现问题也就是无法获取到!

    一、微信小程序获取dom节点:

    1.创建选择器

            var query = wx.createSelectorQuery();

    2.查询

           集合:query.selectAll('.traffic').boundingClientRect(()=>{}).exec()

           单个: query.select('.tripinfotitlelist').boundingClientRect(()=>{}).exec()

    二、获取dom节点场景

    1.与数据渲染无关(dom节点挂载结束即可获取,根据页面生命周期选择合适的时间获取)

    2.与数据相关(数据渲染结束获取即可)

            this.setData({},{

              setTimeout(()=>{

                      //获取即可

              },300)

            })

    展开全文
  • "请输入性别" : "" }}{{ columns[gender] }} </view> </picker> </view> register.js Page({ columns: ["未知", "男", "女"], gender: 0 || wx.getStorageSync("gender") * 1, }) pickSex: function(e) { this....
  • wx小程序基本使用

    2020-12-21 16:49:42
    9.使用promise分装wx.request 10.本地存储的使用 1.目录结构 1.pages目录 新增页面并进行配置 2.utils目录 我们工具脚本文件 3.app.js 全局逻辑脚本 4.app.wxss 全局样式文件 5.app.json 全局配置文件 2.引入...
  • 前一阵上手小程序第一个功能就是做的用户定位,由于使用的是wx自带的接口,而且无论选择 wgs84 还是 gps 都存在经纬度小数不够精确的问题,所以精度要求不高或者自娱自乐的项目可以用用_(:з」∠)_ 废话不多说直接...
  • 小程序中使用wx.showToast语法结构 在onload中去触控产生执方法: wx:showToast({ title:'成功', icon:'success', duration:2000 }), wx.showToast(Object object) 以Promise 风格调用:支持 ...
  • wx.request的封装进行复用 const tokenKey = "access-token"; const serverUrl = getApp().globalData.URL; // 例外不用token的地址 const exceptionAddrArr = ['/user/login',]; const token = wx....
  • 配置域名 一般情况下,项目中的域名前缀都是配置在 /app.js 中 ... App({ onLaunch: function() { }, globalData: { userInfo: null, loginCode: null, version: '1.0.0', ...在小程序目录下建立
  • 微信小程序路由使用前言一、wx.switchTab(Object object)二、使用步骤1.引入库2.读入数据总结 前言 一、wx.switchTab(Object object) 二、使用步骤 1.引入库 代码如下(示例): import numpy as np import ...
  • 关于小程序wx.getUserProfile接口

    万次阅读 多人点赞 2021-03-05 12:12:49
    关于小程序wx.getUserProfile接口的调用 最近微信小程序对于审核小程序提出了带有wx.login、wx.getUserInfo接口的调整,并提出了一个新的接口供开发者调用 下图是对于新的接口的官方文档详情 点击前往官网查看更多...
  • 刚好遇到要写微信小程序人脸识别的功能,就翻了一下微信小程序文档 人脸识别跳转文档 缺点:照片也可以成功。我试了一下眨眼,但是好像不行,闭眼都能识别到眼睛。 然后没有demo,就自己研究了,记录一下。用...
  • 具体看小程序登录、用户信息相关接口调整说明 所以以后获取用户信息,都要通过用户进行授权才可以!所以就用到了wx.getUserProfile这个接口了!其实与前面哪个差不多像! 使用方法 var that = this; //判断是否...
  • charles抓取pc端wx小程序接口 亲测有效 第一步: 下载工具 charles工具 第二步:配置证书 配置证书 安装Charles Root证书 第三步 配置访问控制设置 汉化后的 代理 -> 访问控制设置 -> 添加 IP范围填写 0.0....
  • onplay}}">image> <image src="https://s4.ax1x.com/2021/12/16/T9BFhT.png" wx:if="{{onplay}}">image> <slider value="{{playTime}}" disabled="true" /> <view class="Mp3Btn"> <button bind:tap="onMusic" wx:if...
  • 微信小程序wx.getUserProfile接口的使用

    千次阅读 2021-04-19 20:10:28
    故以后的小程序如果要使用用户的昵称、头像等个人信息必须通过wx.getUserProfile方法来返回。开发者如需获取用户身份标识符只需要调用wx.login接口即可。根据自己的实际需求去选择使用哪个接口。 3.改版之后如何使用...
  • vm.js:2 _C ^^ SyntaxError: Unexpected end of input at new Script (vm.js:83:7) at VM.run (D:\Program Files\nodejs\node_global\node_modules\vm2\lib\main.js:834:13) at wu.get.code (L:\GitHub\...
  • 微信小程序中某个控件的点击事件bindtap触发时如何传参 举例实现: 1、wxml文件 这里的参数名是 item,参数值是 doubleperson 。 <view class="radioBtn" bindtap="addedopertap" data-item="doubleperson">...
  • <view wx:for="{{array}}" wx:for-index="myIndex" wx:for-item="myItem"> {{myIndex}}: {{myItem}} </view>
  • 微信小程序里,通过使用 wx.setClipboardData实现点击按钮复制订单信息,如下图所示: wxml <view class="code copyCode">订单编号:{{details.orderNO}} <button @tap.stop="copyOrder">复制</...
  • 后端接口要求encryptedData,iv,rawData,signature,code这个5个参数,前4个在getUserProfile方法中,后一个在wx.login中,最后在掉接口,所以我想到了promise,千万不要在方法的sucess回调中一层一层的写会报错 ...
  • //pages/type/type.jsPage({/*** 页面的初始数据*/data: {types:""},editType: function (e) {var typeId = e.currentTarget.dataset['id'];...wx.navigateTo({url:'../type_edit/type_edit?type...
  • 小程序请求后台API接口一般都用wx.request来调用,但是为了规范管理和后续升级,封装了通用的请求方法 新建http.js :getHeader方法中根据需要编写自己的鉴权业务,wx.uploadFile根据自己后台上传接口更改 const ...
  • 登录 js: GetUserInfo(e) { wx.getUserProfile({ desc:'正在获取',//不写不弹提示框 success:function(res){ console.log('获取成功: ',res) }, fail:function(err){ console.log("获取失败: ",err) } }) }
  • 文章目录1、授权登录:wx.getUserProfile1、使用wx.getUserProfile实现登录2、使得头像美观,头像和名字居中对齐3、授权登录后使得授权按钮自动隐藏1、第一种方式2、第二种方式(推荐:代码量少)2、退出功能 ...
  • 小程序调用wx.getUserProfile()方法无效
  • (3)微信小程序屏幕宽度适配比为750rpx。 (4)计算整体轮播图的宽:找到对应图片的宽(width)和高(height)。图片的宽 / 图片的高 = 750rpx / 整体轮播图的宽。 ③me.js 参照官方文档: ①WXML语法参考——列表...
  • 原因:小程序登录、用户信息相关接口调整 小程序登录、用户信息相关接口调整说明:https://developers.weixin.qq.com/community/develop/doc/000cacfa20ce88df04cb468bc52801 解决方法:wx.getUserProfile 官方...
  • wxml <view class="successlist"> <span>...span wx:if="{{list.visitCause==0}}"> 面试</span> <span wx:elif="{{list.visitCause==1}}"> 开会</span> <span w...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 118,725
精华内容 47,490
关键字:

WX小程序