小程序问题

参考网站:

小程序一些知识点-CSDN博客z

text标签之间不能有多余的空格,会影响展示(会有高度)

wx:if,微信wxml的{{}}中不能使用函数,要是用wxs

[文档]
 

wx:for中想查看item对象

可以写tap事件然后data-item=item传参,在事件中console

wx.navigateTo要用绝对路径

父子组件使用方法

父传子props,子传父emit/on

setData的callback函数不触发

小程序setdata的callback函数是在页面渲染完才触发,如果页面渲染报错,就不会触发

wxss样式不生效

不能有冒号

支付宝支付需要安装沙箱

文档

体验版无法获取openid,需开调试模式

文档w

微信支付

流程:wx.login拿code》后端接口获取openid》后端预支付接口获取拉起支付需要的参数》调用wx.requestPayment(Object object) | 微信开放文档

小程序预览版查看

这里点击后,在微信的小程序助手上可以查看到相应的预览包

自定义组建 

APP跳转小程序

文档

小程序原始id和appid

查看原始id的方法

小程序调试某一页面及参数(分包场景)

视图容器总结

微信小程序 视图容器总结-CSDN博客

小程序的事件传参

微信小程序实现传参数的几种方法示例_javascript技巧_脚本之家

一、navigator 跳转时

wxml页面(参数多时可用“&”)

<navigator url='../index/index?id=1&name=aaa'></navigator>

或者添加点击事件,js用navigateTo跳转传参,两种效果一样

wx.navigateTo({

  url: '../index/index?id=1&name=aaa',

  })

js页面  在onLoad里直接获取

onLoad: function (options) {

 //页面初始化 options为页面跳转所带来的参数

 var id = options.id //获取值

},

二、全局变量

app.js页面

globalData:{

  id:null

 }

赋值:

var app = getApp();

app.globalData.id = 2

取值:

var app = getApp();

var id = app.globalData.id

三 data属性传参

data-开头,多个单词由连字符-链接,不能有大写(大写会自动转成小写)如data-element-type

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>

js代码:

Page({
  bindViewTap:function(event){
    event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法
    event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写
  }
})

四、form表单传值

form表单传值比较简单常用,就不举例了

问题集锦

1.小程序里面,点击页面顶部的返回按钮的时候,返回的那个页面不会刷新。页面直接跳转返回都可以传参跳转。需要做处理的时候,在onshow的时候接收参数并处理即可。

2. 页面有弹层时,阻止下面的页面滚动。

这个只能是用“曲线救国”来形容了。因为不能直接操作dom。就要通过class控制。通过设置外层的dom为fixed,宽度高度为100%;

.tripFix_root{
    top:0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    z-index: 0;
}
 <view class="wx_wrap recharge {{fixflag?'tripFix_root':''}}"></view>

如果,你是index页面中用了组件,然后组件里有弹窗,这个时候要阻止的是index里面的最外层dom。这就要组件事件(https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html)来处理了。

3.小程序样式单位rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。有时候会出现在大屏手机上显示过小的情况。

4. 小程序中的数据改变需要调用setData去设置。如果想改变数组中的某一项的某个值,可以这样设置:

Page({
  data: {
    array: [{text: 'init data'}],
  },
  changeItemInArray: function() {
    this.setData({
      'array[0].text':'changed data'
    })
  }
})

动态设置某个值的时候可以这样设置

var param = {};
var string = "array["+index+"].text;
param[string] = 'changed data';
that.setData(param);

5.wx:if的使用,跟vue中的v-if原理一样, 如果不符合渲染条件,它不会渲染相应部分; 小程序中有元素显示频繁切换的需求,例如选中与不选中这样。建议使用 display: hidden,通过class控制。这样能够提高用户体验。

6. 名称以 bind 开头的事件不阻止冒泡,名称以 catch 开头的事件冒泡是阻止的。如 bindTap 和 catchTab。

7.在 WXML 中,可以使用 dataset 定义 data 中的数据,会通过事件传递。它的事件以 data- 开头,多个单词以 - 链接,如 data-a-b。也可以整个对象一起传,如data-item="{{item}}",需要注意的是,使用这种方式定义的变量不能有大写。它会自动转成驼峰命名,调取的时候去驼峰命名的名字。

<view class="form-item">
        <view class="form-item-title">密码设置</view>
        <view class="form-item-label">
            <input type="number" maxlength="6" bindchange="handlePasswordInput" password="true" value="{{payPwd1}}" placeholder="请输入密码(只能数字)"/>
        </view>
</view>

// 获取全局应用程序实例对象
const app = getApp();
import completeInfoApi from '../../api/completeInfo.js';
import Tips from '../../utils/tip.js';
import { PHONE, EMAIL, WHOLENUMBER } from '../../utils/regular.js';

// 创建页面实例对象
Page({
  /**
   * 页面的初始数据
   */
  data: {
    payPwd1: '',
  },

  /**
   * 密码设置输入
   */
  handlePasswordInput(e) {
    this.setData({
      payPwd1: e.detail.value
    });
  },

 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
    // TODO: onLoad
    this.messageComponent = this.selectComponent('.messageTips');
    // 获取用户信息
    let params = {
      memberId: wx.getStorageSync('memberId')
    };
    completeInfoApi
      .getUserInfo(params)
      .then(res => {
        let sex;
        if (res.data.data.memberSex == 'MAN') {
          sex = 0;
        } else if (res.data.data.memberSex == 'WOMAN') {
          sex = 1;
        } else {
          sex = '';
        }
        this.setData({
          memberName: res.data.data.memberName || '',
          memberSex: sex,
          memberPhone: res.data.data.memberPhone,
          email: res.data.data.email,
          region: res.data.data.memberProvince
            ? [
              res.data.data.memberProvince,
              res.data.data.memberCity,
              res.data.data.memberDistrict
            ]
            : [],
          regionStr: res.data.data.memberProvince
            ? res.data.data.memberProvince +
              '/' +
              res.data.data.memberCity +
              '/' +
              res.data.data.memberDistrict
            : '',
          memberProvince: res.data.data.memberProvince,
          memberCity: res.data.data.memberCity,
          memberDistrict: res.data.data.memberDistrict,
          address: res.data.data.address,
          payPwd1: res.data.data.payPwd || '',
          payPwd2: res.data.data.payPwd || ''
        });
      })
      .catch(err => {
        console.log(err);
      });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    // TODO: onReady
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    // TODO: onShow
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
    // TODO: onHide
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
    // TODO: onUnload
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    // TODO: onPullDownRefresh
  }
});

8.block标签,<block/> 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。

因为 wx:if 是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个 <block/> 标签将多个组件包装起来,并在上边使用 wx:if 控制属性。这样可以减少标签的使用。

<block wx:if="{{true}}">
             <view> view1 </view>
            <view> view2 </view>
        </block>

 9.输入框Input坑点

1)键盘弹起,页面自动上推。

。但是目前,没有用户到达此版本,

2) 输入框输入号码时,按照344格式化,直接return字符串并不生效。用setData设置则生效,但ios下可以明显看到有间隔,安卓下实际上有间隔,但是必须输入框失焦才会显示出来。

3) 不能在bindinput事件中setData,否则ios下有一个严重的bug。具体表现为,输入事,光标移至中间输入或删除,光标会自动跳到最后。

10.<block/> 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。

因为 wx:if 是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个 <block/> 标签将多个组件包装起来,并在上边使用 wx:if 控制属性。

        <block wx:if="{{true}}">

             <view> view1 </view>

            <view> view2 </view>

        </block>

11.小程序中picker-view中bindchange方法会在滑动结束后点确定才触发,如果我随手一滑,还没等他停下就就按确定按钮或者跳转页面,那么bindchange没触发就不能获取到滑动后改变的值

12.开发者工具断点有bug,对象为undefined,对象里面的值却是有东西的。

12 小程序 xxx不在以下request 合法域名列表

小程序 xxx不在以下request 合法域名列表-CSDN博客

13微信小程序提示 Page is not found

微信小程序 Page is not found-CSDN博客

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值