小程序开发笔记

2018-10-09

小程序

设值与取值
数据存储方案
数据渲染
页面跳转
1. 使用wx.navigateTo实现页面跳转的写法
2. 使用wx.redirectTo实现页面跳转的写法
对话框
1. 显示Toast对话框
2. 显示确认取消对话框
当选项中有一项选否时，显示下一项
1. 实现方式
以上选项都不选中
1. 实现代码
参考链接

最近我参与了一个小程序的开发，对于小程序开发我是零基础，所以特此记录一些小程序开发中的技术点。

设值与取值

动态修改变量的值

在data对象中创建一个变量

data: {
  value: 0 
}

修改变量的值

this.setData({
    value: 10 
});

在wxml中使用变量

<view class="page" value="{{ value }}">{{{ value }}</view>

在JavaScript代码中使用变量

func: function () {

  //value是在data对象中定义的变量
  this.data.value
}

动态修改对象的属性值

在data对象中创建一个包含一些属性的对象

data: {
  obj: {
    value: 0
  }
}

修改对象的属性值

this.setData({
    ["obj.value"]: 10 
});

在wxml中使用对象的属性

<view class="page" value="{{ obj.value }}">{{{ obj.value }}</view>

在JavaScript代码中使用对象的属性

func: function () {

  //value是在data对象中定义的obj对象的属性
  this.data.obj.value
}

数据存储方案

将数据保存到本地

wx.setStorageSync("value", 10);

读取保存在本地的数据

var value = wx.getStorageSync("value");

if (value) {
  console.log("读取到了保存在本地的数据，保存在本地的数据为:", value);
} else {
  console.log("没有读取到保存在本地的数据");
}

清除保存在本地的某个数据

wx.removeStorageSync("value");

清除所有保存在本地的数据

wx.clearStorageSync();

小程序在手机上运行时不能清除本地数据的解决方法

try {
  wx.clearStorageSync();
} catch (e) {
  wx.showToast({
    title: "数据清除异常",
    icon: 'none',
    duration: 2000
  })
}

数据渲染

声明式渲染

小程序允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

在wxml中添加一段小程序的布局代码

<view class="page">{{ message }}</view>

在data对象中定义一个message变量，并给变量设置一个值，此时变量的值便会渲染到页面中

data: {
    message: "这是一个小程序的页面"
}

在页面中的效果

条件渲染

在wxml中添加一段小程序的布局代码

<view  class="page"  wx:if="{{ isShow }}">这是一个小程序的页面</view>

在data对象中定义一个bool类型的变量isShow，此时页面会根据isShow变量的值的不同实现数据的显示或者隐藏，当isShow为true时显示数据，当isShow为false时隐藏数据

data: {
    isShow: false
},

当isShow为true时显示的效果

当isShow为false时隐藏的效果

列表渲染

在wxml中添加一段布局代码

<view  class="list">
    <view  class="item"  wx:for="{{items}}"  wx:key="{{item}}">{{item.text}}</view>
</view>

在data对象中定义一个数组，此时页面会按照数组中的数据渲染

data: {
    items: [
      { text: "学习 JavaScript" },
      { text: "学习 Vue" },
      { text: "学习小程序" },
      { text: "整个牛项目" },
    ]
}

运行结果

给标签绑定一个点击时的回调函数

在wxml中添加一个标签，并给标签绑定一个点击时的回调函数

<button bindtap="onNextStep">下一步</button>

在js中定义回调函数

onNextStep: function() {
    console.log("你点击了下一步按钮");
}

页面跳转

在小程序中有两种方式实现页面跳转，分别为wx.navigateTo和wx.redirectTo，其中wx.navigateTo实现的页面跳转后会保留上一个页面，当点击左上角的返回按钮后可以返回到上一个页面，wx.redirectTo实现的页面跳转当跳转到下一个页面后会销毁上一个页面，当点击左上角的返回按钮后不能返回到上一个页面

使用wx.navigateTo实现页面跳转的写法

wx.navigateTo({
    url: "/pages/homepage/index"
});

使用wx.redirectTo实现页面跳转的写法

wx.redirectTo({
    url: "/pages/result/index"
});

对话框

显示Toast对话框

wx.showToast({
    title: "您输入的密码错误",
    icon: "none",
    duration: 2000 
});

代码运行结果

显示确认取消对话框

 wx.showModal({
      title: '提示',
      content: '确定要将这张图片分享到朋友圈吗？',
      success: function (result) {
        if (confirm) {
          console.log("你点击了确认按钮");
        } else {
          console.log("你点击了取消按钮");
        }
      }
});

代码运行结果

当选项中有一项选否时，显示下一项

在做小程序过程中遇到一个需求，就是进入某个页面后，页面中有一些选项，在初始状态下只展示第一项，并且该项默认处于选中状态，当选中该项的否时显示下一项，直到显示到选择最后一项，当选中的是除最后一项之外的每项的是时，隐藏后面的选项

最终实现的效果如下

实现方式

在wxml文件中添加下面的页面布局代码

<view class="screenform-list border-top" wx:if="{{ currIndex >= 1 }}">
  <view class="top-title">
    <span class="top-title-icon"></span>
    <text>针对程序员的问卷调查</text>
  </view>
  <view class="screenform-item" wx:if="{{  currIndex >= 1 }}">
    <view class="screenform-question">1.你是程序员吗？</view>
    <view class="screenform-select">
      <radio-group class="radio-group" id="1" bindchange="onRadioChange">
        <label class="radio">
          <radio checked="{{ currIndex == 1 ? true : false}}" value="1" /> 是
        </label>
        <label class="radio">
          <radio checked="{{ currIndex > 1 ? true : false}}" value="0" /> 否
        </label>
      </radio-group>
    </view>
  </view>
  <view class="screenform-item border-top-line" wx:if="{{  currIndex >= 2 }}">
    <view class="screenform-question">2.你是做前端开发的吗？</view>
    <view class="screenform-select">
      <radio-group class="radio-group" id="2" bindchange="onRadioChange">
        <label class="radio">
          <radio checked="{{ currIndex == 2 ? true : false}}" value="1" /> 是
        </label>
        <label class="radio">
          <radio checked="{{ currIndex > 2 ? true : false}}" value="0" /> 否
        </label>
      </radio-group>
    </view>
  </view>
  <view class="screenform-item border-top-line" wx:if="{{  currIndex >= 3 }}">
    <view class="screenform-question">3.你主要的工作内容是写JavaScript的吗？</view>
    <view class="screenform-select">
      <radio-group class="radio-group" id="3" bindchange="onRadioChange">
        <label class="radio">
          <radio checked="{{ currIndex == 3 ? true : false}}" value="1" /> 是
        </label>
        <label class="radio">
          <radio checked="{{ currIndex > 3 ? true : false}}" value="0" /> 否
        </label>
      </radio-group>
    </view>
  </view>
  <view class="screenform-item border-top-line" wx:if="{{  currIndex >= 4 }}">
    <view class="screenform-question">4.你是做微信小程序开发的吗？</view>
    <view class="screenform-select">
      <radio-group class="radio-group" id="4" bindchange="onRadioChange">
        <label class="radio">
          <radio checked="{{ currIndex == 4 ? true : false }}" value="1" /> 是
        </label>
        <label class="radio">
          <radio checked="{{ currIndex > 4 ? true : false }}" value="0" /> 否
        </label>
      </radio-group>
    </view>
  </view>
</view>

在wxss文件中添加页面样式代码

.radio-group {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.radio-group .radio {
    padding: 20rpx 110rpx 20rpx 0;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}

/* 单选按钮样式调整 */ radio .wx-radio-input {
    width: 32rpx;
    height: 32rpx;
    border-radius: 50%;
    border-color: #cccccc;
}

radio .wx-radio-input.wx-radio-input-checked {
    background: white !important;
    color: #18abff !important;
    border-color: #18abff !important;
}

radio .wx-radio-input.wx-radio-input-checked::before {
    width: 32rpx;
    height: 32rpx;
    line-height: 32rpx;
    border-radius: 50%;
    text-align: center;
    font-size: 28rpx;
    background: transparent;
    color: #18abff;
    transform: translate(-50%, -50%) scale(1);
    -webkit-transform: translate(-50%, -50%) scale(1);
}

.border-top {
    border-top: solid 10rpx #eeefef;
}

.border-top-line {
    border-top: 1rpx solid #d5d5d5;
}

.top-title {
    padding: 16rpx 0 16rpx 30rpx;
    border-bottom: 1rpx solid #d5d5d5;
    font-size: 26rpx;
    font-weight: bold;
    color: #333;
    display: flex;
    flex-direction: row;
    align-items: top;

}

.top-title-icon {
    width: 24rpx;
    height: 24rpx;
    margin-top: 6rpx;
    border-radius: 50%;
    background: url(http://meishadevs.com/images/top-title-icon.png) left center no-repeat;
    display: inline-block;
}

.top-title text {
    margin-left: 22rpx;
    display: block;
    flex: 1;
}

.screenform-list {
    padding-bottom: 20rpx;
    font-size: 30rpx;
}

.screenform-item {
    margin-left: 30rpx;
}

.screenform-question {
    line-height: 36rpx;
    padding: 24rpx 30rpx 0 0;
}

在js文件中添加js代码

const app = getApp()

Page({

    /**
     * 页面的初始数据
     */
    data: {

        //当前选中项的索引
        currIndex: 1,

        survey: {
            title: "针对程序员的问卷调查",
            arr: [
                {
                    question: "你是程序员吗？"
                },
                {
                    question: "你是做前端开发的吗？"
                },
                {
                    question: "你主要的工作内容是写JavaScript的吗？"
                },
                {
                    question: "你是做微信小程序开发的吗？"
                }
            ]
        }
    },

    //单选按钮响应函数
    onRadioChange: function (e) {

        //如果当前项选中的是否
        if (e.detail.value == 0) {

            //显示下一项
            this.setData({
                currIndex: parseInt(e.target.id) + 1
            });

            //如果当前选中的是“是”
        } else {

            //显示当前选中的选
            this.setData({
                currIndex: parseInt(e.target.id)
            });
        }
    }
})

以上选项都不选中

这次小程序中还有一个需求，在多选中有一个以上选项都不选中按钮，当选中以上选项都不选中时，之前选中的选项由选中状态变为不选中状态，当选中除以上选项都不选中的其他选项时，以上选项都不选中的选项变为不选中状态

实现代码

wxml中的布局代码如下

<wxs src="./checkedTool.wxs" module="tools" />

<view class="screenform-item">
  <view class="screenform-question">请选择你喜欢的编程语言？</view>
  <checkbox-group bindchange="onCheckboxChange">
    <label class="checkbox" wx:for="{{checkList}}" wx:key="item">
      <checkbox value="{{item.name}}" checked="{{tools.checkedTool(check, item.name)}}" />{{item.value}}
    </label>
  </checkbox-group>
</view>

wxss中的样式代码

/* 复选框样式调整 */
checkbox .wx-checkbox-input {
    width: 32rpx;
    height: 32rpx;
    border-radius: 10rpx;
    border-color: #cccccc;
}

checkbox .wx-checkbox-input.wx-checkbox-input-checked {
    background: white;
    border-color: #18abff;
}

checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
    width: 32rpx;
    height: 32rpx;
    line-height: 32rpx;
    text-align: center;
    font-size: 26rpx;
    border-radius: 50%;
    background: transparent;
    color: #18abff;
    transform: translate(-50%, -50%) scale(1);
    -webkit-transform: translate(-50%, -50%) scale(1);
}

.screenform-item {
    margin-left: 30rpx;
    font-family:-apple-system-font,Helvetica Neue,Helvetica,sans-serif;
    font-size: 16px;
}

.screenform-question {
    line-height: 36rpx;
    padding: 24rpx 30rpx 0 0;
}

checkbox-group {
    line-height: 36rpx;
    padding-right: 30rpx;
    padding-bottom: 9rpx;
    display: flex;
    flex-direction: column;
}

checkbox-group .checkbox {
    padding: 9rpx 0;
}

checkedTool.wxs文件

//判断数组array中是否包含selectValue元素包含返回true
var checkedTool = function (array, selectValue) {
    var checked = false;
    for (var i = 0; i < array.length; ++i) {
        if (array[i] == selectValue) {
            checked = true;
            break;
        }
    }
    return checked;
}

module.exports.checkedTool = checkedTool;

js代码如下

//pages/test/index.js

Page({

    /**
     * 页面的初始数据
     */
    data: {
        checkList: [
            {
                name: "1",
                value: "C"
            },
            {
                name: "2",
                value: "C++"
            },
            {
                name: "3",
                value: "Java"
            },
            {
                name: "4",
                value: "JavaScript"
            },
            {
                name: "5",
                value: "PHP"
            },
            {
                name: "6",
                value: "以上的编程语言都不喜欢"
            }
        ],

        //当前选中的选项
        check: []
    },


    //多选按钮响应函数
    onCheckboxChange: function (e) {

        //获得当前用户选择的选项中的值
        var array = e.detail.value;

        //如果最后一项选择的是第6项(最后一项选择的是“以上的编程语言都不喜欢”)
        if (array[array.length - 1] == '6') {

            //只选择第6项
            array = ['6'];

        //如果第1项选择的是第6项(第一项选择的是“以上的编程语言都不喜欢”)
        } else if (array[0] == '6') {

            //移除选择的第6项
            array.splice(0, 1);
        }

        this.setData({
            check: array
        });
    }
})

参考链接

meishadevs欢迎任何形式的转载，但请务必注明出处，尊重他人劳动成果。
转载请注明：【文章转载自meishadevs：小程序开发笔记】

上一篇：代码规范类问题修改方法

下一篇：idea使用技巧