微信小程序开发经验记录

简单示例

1、把微信开发者工具安装好后，创建小程序。
AppID可以注册下，后续小程序上线会用到，前期可以使用测试号先开发程序，后续修改AppID即可。
模板选择基础模板就行。

2、开发页面如下。
左上角可以控制几个窗口的打开和关闭。模拟器窗口用于实时模拟，改好程序点编译后，模拟器可以实时呈现效果。编辑器修改代码。调试器用于程序调试，输出调试内容，调试器需要关注Console，这个用的最多。

3、就跟网页一样，小程序也是由每个页面组成的，页面放在pages文件夹下，一个页面就是一个文件夹，比如当前只有index这个页面，后续要增加其他页面，继续在pages下新建即可。

每个页面包含4个文件
.wxml就是html文件，用于描述页面的结构，比如显示内容、文本框、按钮、图片等。
.wxss就是css，用于描述样式，使页面美观。
.js放逻辑代码，放变量，回调函数啥的，比如按下按钮后的效果就在这里实现。
.json不用管。

4、现在来做第一个程序。

新建一个demo页面，把app.json中的pages/index/index直接修改为pages/demo/demo，点编译，可以看到pages下自动多出了demo文件夹以及4个文件，通过这种方法可以快速新建页面，要增加其他页面继续在app.json中增加即可。

当前显示的就是demo页面了，页面内容就是demo.wxml中的内容。

要让内容有效果就要使用组件。使用view组件把要显示的内容包起来，然后添加css标签’text’

在wxss中去定义text

这样内容就有效果了

<view>
  <text class='text'>pages/demo/demo.wxml hello world</text>
</view>

.text {
  /* 字体大小 */
  font-size: 20px;
  /* 字体颜色 */
  color: red;
  /* 字体风格-粗细 */
  font-weight: bold;
  margin-top: 40rpx;
  align-items: center;
}

view的知识可以参考：view和scroll-view组件的基本用法

5、变量定义和引用
编写如下代码

<input auto-focus bindinput="bindInput11" placeholder="请输入内容qwq"/>

input用于创建输入框，bindinput用于绑定回调函数，当输入内容变化，就会调用bindInput11函数

<text selectable class='text'>{{Input}}</text>

selectable 表示此文本内容可以长按后选中，用于复制。{{Input}}表示显示input变量的内容。

<button class="button" bindtap="bindButton22"
    style="background-color: #33ccff;font-size: 30rpx;" 
    type="primary">我是按钮</button>

button 用于创建按钮，绑定回调函数bindButton22，当按下就会调用。
在demo.js中去定义input变量和回调函数

  data: {
    Input: '',
  },

在data中添加要定义的变量。

  bindInput11: function (e) {
    this.setData({
      Input: e.detail.value
    })
    console.log(e.detail.value)
  },

输入框的回调函数，当输入内容变化时就会调用。通过this.setData，把输入框的内容赋值给Input变量。console.log(e.detail.value)是调试打印输出，输出内容显示到Console窗口中。比如我输入123.

就可以看到输入回调函数的调用过程。

bindButton22(){
    var buf1 = this.data.Input;
    console.log(1,buf1);
    if(buf1=="123"){
      wx.showToast({
        title: '输入了123',
        icon: 'error',
        duration: 2000
      })      
    }
  },

定义局部变量buf1，把Input变量的值赋值给它。
如果输入内容是123，就显示弹窗。

6、单步调试，查看变量内容
通过真机调试可以单步调试程序，查看变量值

在程序行的前面点击就可以打断点。