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‘
        })

原文地址:https://www.cnblogs.com/caiCheryl/p/8267598.html

时间: 2024-10-10 00:08:00

wx 小程序开发 [记录]的相关文章

微信小程序开发 记录

采坑了 微信小程序--TabBar不出现的一种原因 学习微信小程序中,遇到底部的TabBar不出现的问题.经过多番尝试,终于解决问题.在此记录问题产生的原因和对策.下面先描述错误现象,接着指出错误原因,最后提供正确的实例.  错误现象是,项目的app.json使用以下代码,却没有如期望那样在屏幕底部出现TabBar. { "pages":[ "pages/clickDemo/clickDemo", "pages/logs/logs", "

Wx小程序开发

微信小程序之绑定点击事件 https://blog.csdn.net/yanglei0917/article/details/70171921 吐司 https://blog.csdn.net/hedong_77/article/details/54948537 调试 console.log(res),在开发工具上扫描"远程调试"按钮生成的二维码,即可在console里看见日志 . 原文地址:http://blog.51cto.com/4259297/2156194

小程序开发记录-02

1.用户输入内容 插入数据库 再通过记录ID 查询数据显示给用户 2.新建main 文件夹 在根目录JSON 配置为首页 3.调用云API 必须获取小程序openid 相当于当前小程序用户ID 小程序无需单独登录,因为与微信一体,openid判断用户是否登录的唯一标识 4.调用云函数login 获取openid的代码 存在模板中 index.js onGetOpenid(); 5.发送数据:先从data中获取对应数据值(页面和data一一对应)在元素上绑定对应事件 input:bindinput

小程序开发记录-01

1.账号创建什么的就不需要多说了 2.进入开发后 顶部会有云开发按钮(个人云开发版)点击进入云开发设置页面 开通云开发 3.之后 在微信开发工具项目目录cloudfunctions 右键 同步云函数列表 再次右键login文件夹 上传并部署 4.点击左侧获取openid 5.云开发系统目前包含云数据库 云存储 云函数 6.数据库中插入一条JSON(类似表)信息 进入userConsole文件的JS文件 onLoad 函数下执行如下: wx.cloud.init({env:"环境名"})

微信小程序开发记录

顶栏banner代码 /**app.wxss**/ .container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box; } page{ /**background-color:rgb(255,204,204);**/ height:100%;

微信小程序开发中wx.redirectTo与wx.navigateTo跳转页面未果

学习小程序开发中难免遇到一些小坑,作者在进行登录功能时遇到登录成功后,页面不可实现跳转到个人中心(admin/admin). 首先大致介绍一下本文的逻辑:验证用户信息后,需跳转页面到个人中心(tabBar页面),采用wx.redirectTo与wx.navigateTo两种方法均未实现,且不报错. 主要原因: admin/admin属于tabBar页面,采用上述两方法不会有任何效果,需采用wx.switchTab法进行跳转. 跳转完成页面: 页面跳转方法: 1.wx.navigateTo 保留当

[转]灯灯小程序开发手记:仿今日头条(上)

本文转自:http://www.jianshu.com/p/a1e0b8abb12d 写在前面 新的一年,祝大家新年快乐!当然对于程序员来说,新的一年,也要有新的改变.因此灯灯决定凑热闹编写微信小程序啦! 上一篇文章<记一次小程序开发过程>中,灯灯大致写了下自己第一次开发小程序的感受和流程.这一次灯灯会详细记录下自己制作一个小程序的思路.遇到的问题.涉及到的代码等和大家分享.    视频教程地址:http://study.163.com/course/introduction.htm?cour

微信小程序开发日记——高仿知乎日报(上)

本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该教程分为以下三篇 微信小程序开发日记--高仿知乎日报(上) 微信小程序开发日记--高仿知乎日报(中) 微信小程序开发日记--高仿知乎日报(下) 三篇分别讲不同的组件和功能块 这篇要讲 API分析 启动页 轮播图 日报列表 浮动按钮 侧滑菜单 API分析 以下是使用到的具体API,更加详细参数和返回结

小程序开发的40个技术窍门,纯干货!

微信“小程序”正式上线一周时间,相关话题持续升温.支付宝开发“小程序”的消息也随即曝出,互联网巨头们摩拳擦掌,不少网友调侃说,这势头感觉要挑战现有的“APP帝国”了.那么,面对如此炙手可热的小程序,WeX5移动开发云也没有闲着,经过全网搜索,为大家筛选出一条小程序开发者的必读文章,内容涵盖小程序开发实战需要注意的40个技术点,供大家参考! Q:为什么脚本内不能使用window等对象 A:页面的脚本逻辑是在JsCore中运行,JsCore是一个没有窗口对象的环境,所以不能在脚本中使用window,