小程序开发补坑

最新推荐文章于 2025-03-01 18:28:41 发布

原创最新推荐文章于 2025-03-01 18:28:41 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序开发总结1

微信小程序专栏收录该内容

4 篇文章

订阅专栏

一 app.wxss

app.wxss里的样式是全局的

二 wx:for 内容循环

<block wx:for="{{hotelList}}">
    <navigator url="{{item.pageurl}}?title={{item.name}}">
        <view id="{{item.hotelID}}" data-index="index">
            <image class="leftBuilding" src="/images/building.png"></image>
            <text>{{item.name}}</text>
            <image src="/images/right-arrow.png" class="rightArrow"></image>
        </view>
    </navigator>
</block>

三 wx:if 条件选择

<block wx:for="{{hotelList}}">
    <navigator url="{{item.pageurl}}?title={{item.name}}">
        <view id="{{item.hotelID}}" data-index="index">
            <image class="leftBuilding" src="/images/building.png"></image>
            <text>{{item.name}}</text>
            <image src="/images/right-arrow.png" class="rightArrow"></image>
        </view>
    </navigator>
</block>

提示：也可以在{{这里面进行判断}}，如：{{index>arr.length?’真’:’假’}}，通常控制UI组件显示状态

四 navigator

实现前端a标签操作，实现页面跳转。

属性名	类型	默认值	说明
url	String		应用内的跳转链接
redirect	Boolean	false	是否关闭当前页面
hover-class	String	navigator-hover	指定点击时的样式类，当hover-class=”none”时，没有点击态效果

<navigator url="{{item.pageurl}}?title={{item.name}}">
    新页面打开 
</navigator>

提示 function(options)
1.url页面地址后面可以挂参数，在目标页面的onload事件里的函数通过参数options来获取传递的参数。
2.参数数据类型如果是数组[]，会被转换成字符串处理，可以在目标页通过split()处理。
3.如果参数式json对象{}，传递前要先通过obj.JSON.stringify()转换成json字符串，在目标页面通过obj.JSON.parse()再转回json对象

五事件

wxml:
    <input data-index="{{index}}" data-name="wc" value="{{item}}" bindtap="datasetTest"/>

js:
    datasetTest:function(e){
      /**
      *业务逻辑
      */
      console.log(e);
    }

运行截图：
这里写图片描述

提示 function(e)
标签内可以通过data-[自定义name]的形式携带参数,在事件里可以通过e.target.dataset.name的方式获取。

六 modal模态框

<modal 
        hidden="{{hidemodal}}"
        title="房间添加" 
        confirm-text="确定" 
        cancel-text="取消" 
        bindconfirm="bindAddConfirm" 
        bindcancel="bindAddCancel" 
    >
    确定添加新房间 {{newHotelName}} 吗？
</modal>

注意：
1.通过动态改变hidden的true/false来控制模态框的显示与隐藏。
2.模态框里的bindconfirm用来真正执行某一个事件操作

七 toast 消息提示框

常用方法wx.showToast(OBJECT)。

wx.showToast({
      title: '添加成功',
      icon: 'success',
      duration: 2000
    })

**注意：**icon只支持success,loading图标。

八数组与UI

问题
1.增加或删除一个UI组件（这个UI组件是通过数据动态渲染的），其他UI组件的数据内容被刷新
2.数据同步问题
处理
—增加：

//添加房间输入框UI
  plusAddRoomUI:function(e){
    this.setData({
      moreRoomUI:this.data.moreRoomUI.concat([''])
    });
    console.log(this.data.moreRoomUI);
  }

—删除：

//删除添加房间输入框UI(任意位置删除或最后位置删除选一)
  removeRoomUI:function(e){ 
    /**
     * 从最后一个位置开始删除
     */
    // this.data.moreRoomUI.pop();//删除最后一个UI
    // this.setData({
    //   moreRoomUI:this.data.moreRoomUI
    // });

    /**
     * 任意位置删除,but 如果从非最后一个位置删除，那么其他位置的UI内容都会被刷新
     */
    this.data.moreRoomUI.splice(e.target.dataset.index,1);//删除单击（选中）的UI
    this.setData({
      moreRoomUI:this.data.moreRoomUI
    });
    console.log("id=",e.target.id,this.data.moreRoomUI);
  }

—动态改变利用wx:key=”{{unique}}” 指定列表中项目的唯一的标识符

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

wxml:
    <switch type="switch" wx:for="{{objectArray}}"  wx:key="id" id="{{index}}" >         {{item.unique}} 
    </switch>

js:
    switch: function(e) {
        const length = this.data.objectArray.length
        for (let i = 0; i < length; i++) {
          const x = Math.floor(Math.random() * length)
          const y = Math.floor(Math.random() * length)
          const temp = this.data.objectArray[x]
          this.data.objectArray[x] = this.data.objectArray[y]
          this.data.objectArray[y] = temp
          console.log(x,y);
        }
        this.setData({
          objectArray: this.data.objectArray
        })
    }

小总结:
一：向数组中添加数据
1.通过arr[arr.length]=”new value”
2.通过arr.push(‘new value’)
3.通过临时数组拼接原始数组的方式arr.concat(tempArr)或者tempArr.concat(arr)

二：删除数组中任意位置数组
1.通过：arr.splice(index,1)来删除，这句执行完后返回值是被删除的数据，但是会改变原数组的数据（已经删除了目标值的数组），只需要通过this.setData()方法重新渲染即可
2.如何获取index? 通过data-[name]传值【见上述】

九设计规范

基于微信小程序轻快的特点，我们拟定了小程序界面设计指南和建议。
设计指南建立在充分尊重用户知情权与操作权的基础之上。旨在微信生态体系内，建立友好、高效、一致的用户体验，同时最大程度适应和支持不同需求，实现用户与小程序服务方的共赢。

1.友好礼貌

——-重点突出
——-流程明确

2.清晰明确

——-导航明确，来去自如
——-减少等待，反馈及时
——-异常可控，右路可退

3.便捷优雅

——-减少输入
——-避免误操作
——-利用接口提升性能

4.统一稳定

5.视觉规范

——-字体：大小、颜色
——-列表：间距
——-表单：提示与输入框的比例，对齐方式
——-按钮：可用、不可用，不同状态透明的不同
——-图标：完成、提醒、警告（视情况而定）

十问题与不足

微信小程序 很大程度上简化了开发，但是微信为了维护自己产品生态，主张统一和谐而做了很多的限制，新设计的应用基本上无法照搬之前的模型，设计时要考虑“配色和谐统一”、“最多打开5个页面”、“底部导航2-5个”、无法更改顶部导航栏的功能菜单等等约束。否则可能会出现，页面链接失效，因为当前打开页面已经5个了，因此在设计页面跳转时部分页面不得不使用重定向方式（即关闭当前的页面，再打开新的页面）这样无法避免的产生程序后退不能回到真正的上一级页面。诸多小问题需要慢慢发现然后解决或者是顺应版本。