微信小程序目录结构

2019年12月23日

js是写逻辑的，wxml是写页面的，wxss是设计css样式的，wxs是微信小程序脚本语言（可以同时写页面和逻辑）

一.目录结构

image.png image.png

1.框架全局目录

app.json 配置所有页面，顶部导航，底部menuBar

app.js 一般用来获取用户信息。或创建初始的测试数据

2.框架页面文件，一般是单页的所有代码

3.工具类文件，一般要export导出，其他页面才能使用

二.微信小程序注册程序应用

app.js文件 各个生命周期

image.png

三.微信小程序注册页面的使用 page里面的页面

1.各种接口

image.png image.png

// pages/movie/movie.js
Page({
  /**
   * 页面的初始数据
   */
  data: {},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {},
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {},
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {},
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {},
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {},
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {},
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {},
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {}
})

三.微信小程序如何绑定数据

image.png image.png

四.微信小程序条件渲染

1.一般都是多个控件渲染用 block wx： 单个渲染用 view wx：

image.png image.png

五.微信小程序列表渲染

image.png

<block wx:for="{{[1,2,3]}}">
  <view>{{index}}</view>
  <view>{{item}}</view>
</block>
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}:{{itemName.message}}
</view>

data: {
  array: [{
      message: "one"
    },
    {
      message: "two"
    }]
},

image.png

六.微信小程序定义模板

image.png

七.微信小程序引用功能

image.png image.png image.png

八.WXS小程序脚本语言（WeiXin Script）
2019年12月24日

可以在页面上处理逻辑语言

一.模块化

第一种用法：直接在wxml文件中创建

image.png

第二种用法：创建一个wxs文件

image.png image.png

二.变量和数据类型

和javascript 基本一样 略

三.注释

和javascript 基本一样 略

四.语句

和javascript 基本一样 略