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 基本一样 略
