微信小程序 语法学习

1. 注册小程序账号

https://mp.weixin.qq.com/cgi-bin/wx

2. 获取appId

开发管理 -> 开发设置

3. 下载开发工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

4. 登录开发工具

不推荐游客模式，使用微信扫描
工具内置了很多模板，很好用，我们先选择js基础模板

5. 目录

• app.json： 最重要的文件，全局配置，pages是页面，windows是窗口配置
• app.js：整个项目逻辑
• app.wxss：整个项目样式
• sitemap：搜索时配置文件
  

6. 初体验代码

<!--pages/learn_01/index.wxml-->
<text>pages/learn_01/index.wxml</text>
<br/>
<!-- 显示普通文本 -->
<text class="text">普通文本</text>
<!-- 数据绑定 -->
<view class="message">{{message}}</view>
<!-- 列表渲染 可以重命名item与index，可以使用block block不会生成元素类似template-->
<block wx:for="{{list}}" wx:key="item">
  <text>{{item}}-{{index}}</text>
</block>
<!-- 事件绑定 -->
<view>
  <view>{{count}}</view>
  <button bind:tap="addCount">+</button>
  <button bind:tap="delCount">-</button>
</view>
<!-- 条件渲染 -->
<view wx:if="{{count>10}}">count大于10了</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// pages/learn_01/index.js
Page({
  data:{
    message: 'hello zyl',
    list: ['111','2222','33333'],
    count: 0
  },
  addCount() {
    console.log('+1');
    // 直接修改data会改变数据，但不会刷新页面，需要setdata
    this.setData({
      count: this.data.count + 1
    })
  },
  delCount() {
    console.log('-1');
    this.setData({
      count: this.data.count - 1
    })
  }

})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

7. 小程序双线程模型

8.配置文件

• project.config.json：项目配置文件, 比如项目名称、appid等；
• sitemap.json：小程序搜索相关的；
• app.json：全局配置
• page.json：页面配置；