初次接触微信小程序

前言：
这篇博客是小弟第二次写博客，主要是针对于微信小程序的一篇文章。
在这篇文章中，我将写一下自己的见解与初次完成的一个纯粹用微信小程序开发1的demo。欢迎各位的批评、建议和意见。同时本人在这里会分享本人的代码。
如有需要联系本人的，私人QQ：2931592005。私人邮箱：2931592005@qq.com，私人微信：a2931592005。

小程序的结构。

在这里，我会写一些基础的介绍。首先是小程序的一个文件结构。
当新建一个小程序的时候，会默认给你一个demo。

主要的部分为根目录下的app.js、app.json、app.wss，这些文件是小程序的全局配置，是小程序的主体。

其中，app.json是必须有的一个全局配置文件，用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

app.js是也是一个必须的文件，你可以在里面不写任何东西，但是这个文件必须有。这个文件中的部分语法与JavaScript相似

app.wxss不是一个必须的文件，它是处理全局的一个WXSS样式的文件。其语法与CSS相似。

在上面的截图中可以看到有index和logs文件夹。这两个文件夹是小程序的各个页面。接下来的例子以index为例
在index中可以看到有index.wxml、index.wxss、index.js和index.json
其中index.wxss、index.json语法与根目录下的全局配置文件的效果基本相同，不同的地方在于，他们仅影响本页面，并且在编写后会覆盖掉全局配置相同的部分。index.js和index.wxml是必须的文件。index.js相当于是一个动作脚本，用于对index.wxml进行动态修改，index.wxml是页面，用于对用户呈现内容，其语法与H5相似。
通俗一点来说，index.wxml相当于一个素体手办，index.wxss相当于给手办上色，index.js相当于动态对手办的姿势、动作进行动态改变，index.json相当于修改手办的展台。

微信小程序知识点（部分）

微信小程序渲染。
上面提到一个微信小程序的全局配置的必要文件有app.json和app.js。因此微信小程序在新建后只需要保留对应的文件即可。（如下图）

其中app.json和app.js内部分别如下图
app.json（其中必要的属性是pages，windows和style不是必要的。其具体的属性值和属性描述参考微信小程序官方文档）

app.js（在app.js里，键入App，会像其他IDE一样出现提示，选定后这些内容会直接自动显示）

现在在控制台可以看到，有报错。

这里的报错是因为一个微信小程序必须要有至少一个页面。而页面就是在app.json的pages属性中配置的。每次页面文件的路径发生改变时，app.json下的pages也必须进行修改。

可以看到，pages/index/index下生成了四个文件。
其中，我们在文件index.wxml中写一个例子。

接下来一个重点，是微信小程序的一种数据渲染方式，分别有“数据绑定”、“列表渲染”、“条件渲染”。在下面我会一一举例。

1. “数据绑定”

在进行编写的时候，我们首先打开对应页面的.js文件。在data里编写一个对应的数据。

然后在对应的.wxml中，将这个数据引用。

1. “列表渲染”，同理先在对应的文件的data属性中写。（这里需要注意，不用的两部分，需要用","隔开，每一条结尾不要有逗号‘ps这大概是微信小程序最恶心的地方了。’）
   .js文件里，我们加了一个demo2
   
   在.wxml中
   
   ps：微信小程序的列表渲染，可以写二维、三维数组。

2. 条件渲染。.js
   
   .wxml
   

demo

在这部分我会写一个demo。其功能是实现简单的答题。
首先编写页面。使用微信小程序本身的一些组件进行编写。

<!--pages/index/index.wxml-->
<view>
  <form bindsubmit="submit">
    <view>
      <input type="hidden" name="index" value="每题1分。当前题号：{{index}}/3" disabled="true"></input>
    </view>
    <view wx:for="{{timu}}">
      {{item}}
    </view>

    <view class="br"></view>

    <view>
      <radio-group bindchange="radioChange" name="radio">
        <radio class="radio" wx:for-items="{{daan}}" checked="{{checked}}" value="{{item}}">
          <view>{{item}}</view>
        </radio>
      </radio-group>
    </view>

    <view class="br"></view>

    <view style="margin-left:15%;">
      <button bindtap="a" data-index="{{index}}" style="float:left;width:40%;margin-left:5px;">上一题</button>
      <button form-type="submit" style="float:left;width:40%;margin-left:5px;">下一题</button>
    </view>
  </form>
</view>

这里需要讲解一下，微信小程序支持自定义方法。在对应的组件上添加属性bindtap；如果需要传值，则定义“data-”，后面的index就是传值的名称。在对应的js文件中，写这个方法并添加一个参数。

.js
提示，在IDE中，可以写console.log，通过“调试器”看到对应的值

// pages/index/index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    index: '1',
    timu: ['1/当驾驶时前方出现行人该如何做？'],
    daan: ['减速', '加速', '不停按喇叭'],
    yes: ['不停按喇叭'],
    timus: [['1/当驾驶时前方出现行人该如何做？'], ['2/当驾驶时前方出现行人该如何做？'], ['3/当驾驶时前方出现行人该如何做？']],
    daans: [
      ['减速', '加速', '不停按喇叭'],
      ['加速', '减速', 'aaaa'],
      ['aaaaa', '不停按喇叭','减速']
    ],
    yeses: [
      '减速',
      '加速',
      '不停按喇叭'
    ],
    dadui: '0',
    checked:''
  },

  a: function(e){
    var index = e.currentTarget.dataset['index'];
    console.log(index);
    if(index <= '1'){
      return ;
    }
    var data = this.data;
    index = index - 1 ;
    this.setData({
      timu: data.timus[index-1],
      daan: data.daans[index-1],
      yes: data.yeses[index-1],
      index: index,
      checked: ''
    });
  },

  submit: function (e) {
    var index = e.detail.value.index;
    var dadui = this.data.dadui;
    index = index.substring(10, index.length - 2);
    var radio = e.detail.value.radio;
    var dadui = this.data.dadui;

    if (radio == this.data.yeses[index - 1]) {
      this.setData({
        dadui: ++dadui
      });
    }

    if (index === '3') {
      //销毁当且页面，并展示新页面。显示得分。
      wx:wx.redirectTo({
        url: '/pages/jieguo/jieguo?dadui=' + dadui,
        success: function(res) {}
      })
      return;
    }

    var timus = this.data.timus[index];
    var daans = this.data.daans[index];
    var yeses = this.data.yeses[index];
    this.setData({
      index: [++index],
      timu: timus,
      daan: daans,
      yes: yeses,
      checked: ''
    });
  }
})

源码地址

CSDN：谢谢各位
PS：如果需要本demo的源码，请直接联系本人。
文章参考资料：微信小程序官方文档

欢迎大家的转载。建议和意见。