微信小程序语法学习

news2024/11/24 9:50:59

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>

// 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
    })
  }

})