微信小程序记录

创建项目 项目文件结构 项目配置 页面结构

根目录下 app.json 是小程序配置文件来的

app.json

{
  "pages": [  // 页面路径
    "pages/home/index",
    "pages/me/index",
    "pages/detail/index"
  ],
  "window": {
    "navigationBarTitleText": "我的小程序", // 导航栏标题文字内容
    "navigationBarBackgroundColor": "#ffffff", // 导航栏背景颜色
    "navigationBarTextStyle": "black", // 导航栏标题颜色，仅支持 black 或 white
    "backgroundTextStyle": "light", // 下拉 loading 的样式，仅支持 dark 或 light
    "backgroundColor": "#ffffff" // 窗口的背景色
  },
  // 底部菜单配置，list至少2个最多5个
  "tabBar": {
    "color": "#666666",
    "selectedColor": "#3cc51f",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/home/index",  // 底部菜单对应的页面路径
        "text": "首页",
        "iconPath": "images/home.png", // 未选中的icon
        "selectedIconPath": "images/home_on.png" // 选中的icon
      },
      {
        "pagePath": "pages/me/index",
        "text": "我的",
        "iconPath": "",
        "selectedIconPath": ""
      }
    ]
  },
}

根目录下的 pages 文件夹

创建home页面 pages/home/index

index.wxml 和 index .wxss 文件 对应着html和css

index.json是单前页面配置文件：如页面名称

index.js 页面逻辑

这个文件有个固定结构 数据的data:{}、生命周期、和自己编写的函数，如下

Page({

  /**
   * 页面的初始数据
   */
  data: {}, 
  // 生命周期函数会自动调用的
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {},
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {},
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {},
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {},
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {},
  
  // 自己的处理函数
  yourFun() {},
  
})

// page 包裹着的对页面才起作用
// 在page外面写的js语句作用域只在这个文件

这里开始语法

index.js

// pages/home/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    str: '数据绑定',
    arr: [1, 2, 3],
    list: [{id: 1, name: '张三'}, {id: 2, name: '李四'} ],
    isShow: false,
  },
  
  /**
   *   没用到的 生命周期函数 是可以删掉的
   */
    
  /**
   *  自定义的  clickBtn: function() {} 或 clickBtn() {} 都一样
   */
  clickBtn1() {
    console.log('被触发了');
  },
  clickBtn2(event) {
    console.log('被触发了有参数过来', event);
    console.log('自定义传参过了的参数在', event.currentTarget.dataset);
    // event.currentTarget.dataset
    // 打印结果 {id: 1, name: "有传参数"}
  },

  //  自定义的  页面跳转
  goPage() {
    // index.js
    wx.navigateTo({
      url: '/pages/detail/index'
    });
  },
  
  // 自定义的 修改数据 函数
  editStr() {
    this.setData({str: '绑定的数据改变了'}) // 跟新页面数据
    // 这时候页面上的  {{str}}  这里就会显示刚刚上面改的

    // 修改 data: {} 这个里面的内容一定要调用 this.setData()
    // this.setData(obj)  这个方法是接收一个对象的
      
    // 调用函数 
    // 比如这个函数想调用 clickBtn1 这个函数 
    this.clickBtn1()
  },

})

index.wxml

<!--pages/home/index.wxml-->
<view>
    <!-- 数据绑定 -->
	<view>{{str}}</view>
    
	<!-- 条件渲染 -->
	<view wx:if="{{isShow}}">1</view>

	<!-- 列表渲染 或叫 循环渲染  -->
	<view wx:for="{{list}}" wx:for-item="items" wx:key="index">
		<view>{{items.name}}</view>
	</view>

    <!-- 点击事件 -->
	<view bindtap="clickBtn1">按钮1 无传参数</view>
	<view bindtap="clickBtn2" data-name="有传参数" data-id="{{1}}">按钮2 有传参数</view>

	<view bindtap="goPage">点击跳转详情页面</view>
    
    <view bindtap="editStr">点击去修改str的值</view>
    
</view>

还有 组件 的内容，后续再补充

这些官网文档都有说的 小程序开发文档