wx 小程序开发 [记录]

Posted 丶七月小先生丶

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了wx 小程序开发 [记录]相关的知识,希望对你有一定的参考价值。

pages >   html文件夹  > js + json +wxml + wxss

wxml: 
    view  ≈  div
    text  ≈  span

    <view class=‘inputs {{addressChange?"":"noData"}}‘ catchtap=‘getAddress‘>
    {{addressChange?"":"noData"}}  
    catchtap 方法绑定 无冒泡

    <view class=‘lytGrailCon‘><input bindinput ="iStoreName" value="{{sStoreName}}" placeholder=‘请输入公司/店铺/网店名称‘ placeholder-class="gray"></input></view>
    bindinput
    placeholder-class  input的placeholder颜色设置样式

    <picker bindchange=‘pickChange‘ data-param="sltType" value=‘{{sltType.index}}‘ range=‘{{sltType.arr}}‘>
        <text>{{sltType.show}}</text>
    </picker>
    下面弹出选择器 单选 
    bindchange=‘pickChange‘
    range=‘{{sltType.arr}}‘

    <block wx:for=‘{{sltCategory.arr}}‘ wx:key=‘unique‘>
      <text data-index=‘{{index}}‘ class=‘{{item.checked?"cur":""}}‘ catchtap=‘choCategory‘>{{item.name}}</text>
    </block>

json:
    {
      "navigationBarTitleText": "wx标题"
    }

wxss:
    单位:rpx

js:
    var app = getApp();
    data > { 页面展示数据 } ≈ avalon define

    data平级方法
        注意this  var _this = this;
        _this.setData({
            addressChange:true
         })
         改变data里面的值

    input 绑定的方法
        iStoreName:function (e) {
            var _this=this;
            var val=e.detail.value;
            if(_this.handleVal.notEmpty(val)){
              if(val.length<=30){
              }else {
                _this.showSToast(‘公司名称输入过长‘);
                val=val.substr(0,30);
                console.log(val)
              }
            }else {
              _this.showSToast(‘请输入公司名称‘);
            }
            _this.setData({sStoreName: val})
          },

    picker 绑定的方法
        pickChange:function (e) {
           var _this=this;
           var _param=e.currentTarget.dataset.param;
           var show;
           switch (_param){
             case ‘sltCategory‘:show=this.data.sltCategory.arr[e.detail.value];break;
             case ‘sltType‘:show=this.data.sltType.arr[e.detail.value];break;
             case ‘sltSales‘:show=this.data.sltSales.arr[e.detail.value];break;
             default:
               break;
           }
           var _obj={
             index:_param+‘.index‘,
             show:_param+‘.show‘,
             isChange:_param+‘.isChange‘
           };
           _this.setData({
             [_obj.index]:e.detail.value,
             [_obj.show]:show,
             [_obj.isChange]:true
           })
         },

    wx ajax请求
        wx.request({
          url: app.globalData.ajxApi(‘请求url‘),
          header: {‘content-type‘: ‘application/x-www-form-urlencoded‘},
          data: {jsonObj:JSON.stringify(objJson)},
          method: ‘POST‘,
          success: function(res){},
          fail: function() {}
        })
    wx 关闭当前开下个窗口
        wx.redirectTo({
            url: ‘../URL‘
        })

 

以上是关于wx 小程序开发 [记录]的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序开发之页面wxml里面实现循环 wx:for

微信小程序开发第十二天开发接口wx.login用法

微信小程序开发第十二天开发接口wx.login用法

微信小程序开发之三元运算符代替wx.if/wx.else

微信小程序开发接口之授权wx.authorize用法

微信小程序开发接口之授权wx.authorize用法