{

  "pages": [
    "pages/index/index",
    "pages/my/my"
  ],
  "window": {

    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "测试小程序",
    "enablePullDownRefresh": true,
    "navigationBarBackgroundColor": "#ffffff",
    "backgroundTextStyle": "dark" 
  },
 
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

<!--index.wxml-->
<text>首页</text><text>首页</text> 
<!-- 等于span -->
<view>等于div</view>

<image src="/image/16.jpg"  style="height: 200px;width: 500px;"></image>
<icon type="success_no_circle"  color="red"/>
<icon type="cancel" color="#ddd"/>

"tabBar": {
   "selectedColor": "#123456",

   "list": [{
     "pagePath": "pages/index/index",
     "text": "首页",
     "iconPath": "image/home.png",
     "selectedIconPath": "image/home_select.png"
   },
   {
     "pagePath": "pages/my/my",
     "text": "我的",
     "iconPath": "image/my.png",
     "selectedIconPath": "image/my_select.png"
   }
 ]
 },

    # 1 以后在这里面写css 样式
  
    # 2 整个小程序 都生效
  
  
    .myview {
      height: 500rpx;
      width: 750rpx;
      background-color: aquamarine;
      font-size: 30rpx;
    }

    # 1 以后在这里面写css 样式
  
    # 2 只在当前页面中生效
  
    .myview{
      background-color: rebeccapurple;
    }

<swiper 
  autoplay
  indicator-dots
  circular
  indicator-color='#FFFFF'
  interval='3000'
>
  <swiper-item>
    <image src="/images/banner/banner1.jpg" mode="widthFix"/>
  </swiper-item>
  <swiper-item>
    <image src="/images/banner/banner2.png" mode="widthFix"/>
  </swiper-item>
  <swiper-item>
    <image src="/images/banner/banner3.jpg" mode="widthFix"/>
  </swiper-item>
</swiper>

## index.wxml
<view class="tips">
  <text class="iconfont icon-tishi icon"></text>
  <text>欢迎使用我们的系统，谢谢~~</text>
</view>


/*## index.wxss*/

.tips {
  /* 背景色 */
  background-color: #f5eedf;
  /* 字大小 */
  font-size: 32rpx;
  /* 字颜色 */
  color:#e9ab4e; 
  /* 圆角效果 */
  border-radius: 50rpx;
  /* 距离上下右左距离 */
  margin:30rpx 10rpx 30rpx 10rpx;
  padding-left:20rpx ;
}
.icon{
  padding-right: 10rpx;
}

.menu {
  display: flex;
  justify-content: space-between;
  /* 主轴方向上间距相等 */
  padding: 16rpx;
  /* 间距 */
  border-radius: 10rpx;
  /* 圆角 */
  flex-wrap: wrap;
  /* 自动换行 */
}
.item {
  display: flex;
  flex-direction: column;
  /* 纵向排列 */
  justify-content: center;
  /* 主轴上居中 */
  align-items: center;
  /* 非主轴上居中 */
  width: 150rpx;
  height: 200rpx;
  border: rgb(78, 230, 7) solid 1rpx;
  /* 边框大小及颜色 */
  margin: 1rpx;
  background-color: rgb(191, 255, 0);
}

.img {
  width: 88rpx;
  height: 88rpx;
  border-radius: 10rpx;
}

# 1 按钮，某些组件--》点击--》触发事件执行
	-打印xx
    -向后端发送请求
    。。。。
  
# 2 最简单使用
## 2.1 wxml中
<button type="warn" plain size="mini" bind:tap="handleConsole">点击控制台打印</button>
## 2.2 js中
Page({
  handleConsole(){
    console.log('我被点了')
  },

})

# 3 bind:tap="handleConsole"  可以简写 bindtap="handleConsole"

#wxml
<button type="warn" plain size ="mini" bind:tap="handleConsole" data-id="1001" data-nihao="2000">传递参数</button>
#JS	 
handleConsole(event){
  console.log('好的');
  console.log(event.target.dataset);
},

<!-- 定义 mark 属性 -->
<button 
  bind:tap="handleClick" 
  mark:userId="123" 
  mark:username="Alice"
>
  点击
</button>
<JAVASCRIPT>
Page({
  handleClick(event) {
    // 通过 event.mark 获取值（无需 dataset 转换）
    console.log(event.mark.userId);   // 123（数字类型）
    console.log(event.mark.username); // "Alice"（字符串）
  }
})

# 1 navigator 组件 ，加属性--》实现跳转

# 2 最基本的跳转
<navigator url="/pages/login/login"><button type="primary" plain>去登录</button></navigator>

# 3 更多跳转方式--》open-type属性跳转方式
    navigate（默认）：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
    redirect： 关闭当前页面，跳转到应用内的某个页面。但不能跳转到 tabbar 页面
    switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
    reLaunch：关闭所有页面，打开到应用内的某个页面
    navigateBack：关闭当前页面，返回上一页面或多级页面
  
## 3.1 上述演示
<navigator url="/pages/login/login"><button type="primary" plain>去登录</button></navigator>
<navigator url="/pages/login/login" open-type="navigate"><button type="primary" plain>去登录2</button></navigator>
<navigator url="/pages/login/login" open-type="redirect"><button type="primary" plain>去登录3</button></navigator>
<navigator url="/pages/index/index" open-type="switchTab"><button type="primary" plain>去首页</button></navigator>
<navigator url="/pages/login/login" open-type="reLaunch"><button type="primary" plain>去登录4</button></navigator>


# 4 跳转携带参数
-跳转：
<navigator url="/pages/login/login?name=justin&age=19"><button type="primary" plain>去登录</button></navigator>


-另一个页面获取：js
 onLoad(options) {
    console.log(options)
  },

#1 使用js控制跳转

# 2 5个方法--》跟上面是对应的
    wx.navigateTo({
        url: 'url',
    })

    wx.redirectTo({
        url: 'url',
    })

    wx.switchTab({
        url: 'url',
    })

    wx.reLaunch({
        url: 'url',
    })

    wx.navigateBack()
  
  
# 3 页面
<button type="default"  bind:tap="handlenavigateTo">navigateTo</button>
<button type="warn" bind:tap="handleredirectTo">redirectTo</button>
<button type="primary" bind:tap="handleswitchTab">switchTab</button>
<button type="default" bind:tap="handlereLaunch">reLaunch</button>
<button type="warn" bind:tap="handlenavigateBack">navigateBack</button>
  
# 4 js
  handlenavigateTo(){
    wx.navigateTo({
      url: '/pages/login/login',
    })
  },
  handleredirectTo(){
    wx.redirectTo({
      url: '/pages/login/login',
    })
  },
  handleswitchTab(){
    wx.switchTab({
      url: '/pages/my/my',
    })
  },
  handlereLaunch(){
    wx.reLaunch({
      url: '/pages/login/login',
    })

  },
  handlenavigateBack(){
    // 关闭当前页面，返回上一页或上某一页，传入数字
    wx.navigateBack()
  
     wx.navigateBack({
      delta:2
    })
  },

# 7 setData 修改数组
## 7.1 js
data: {
    names:['刘亦菲','迪丽热巴','古力娜扎','马尔扎哈']
  },
  
   handleChangeList(){
    //1 增加数组
    // 1.1 增加再设置值
    this.data.names.push('亚瑟王')
    this.setData({
      names:this.data.names
    })

    // 1.2 通过数组拼接
    // const newList=this.data.names.concat("甄姬")
    // this.setData({
    //   names:newList
    // })

    // 1.3 通过解构赋值
    const newList=[...this.data.names,"李白"]
    this.setData({
      names:newList
    })

    // 2 修改数组
    this.setData({
      'names[1]':'justin'
    })

    // 3 删除数组
    this.data.names.slice(1)
    this.setData({
      names:this.data.names.slice(1)
    })


  },

handleSave() {

  wx.setStorageSync('id', 1);
  wx.setStorageSync('name', '小明');
  wx.setStorageSync('wife', {name:'laopo',add:'dafsdfsadf'});
  // 对于对象是转成json格式存储的
},

Promise {<pending>}
__proto__: Promise
catch: ƒ catch()
arguments: (...)
caller: (...)
length: 1
name: "catch"
nv_length: (...)
__proto__: ƒ ()
[[Scopes]]: Scopes[0]
constructor: ƒ Promise()
all: ƒ all()
allSettled: ƒ allSettled()
any: ƒ any()
arguments: (...)
caller: (...)
length: 1
name: "Promise"
nv_length: (...)
prototype: Promise {Symbol(Symbol.toStringTag): "Promise", constructor: ƒ, then: ƒ, catch: ƒ, finally: ƒ}
race: ƒ race()
reject: ƒ reject()
resolve: ƒ resolve()
try: ƒ try()
withResolvers: ƒ withResolvers()
Symbol(Symbol.hasInstance): ƒ value(e)
Symbol(Symbol.species): (...)
get Symbol(Symbol.species): ƒ [Symbol.species]()
__proto__: ƒ ()
[[Scopes]]: Scopes[0]
finally: ƒ finally()
then: ƒ then()
Symbol(Symbol.toStringTag): "Promise"
__proto__: Object
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: Object

async function example() {
    // 这一行代码
    const result = await somePromise
  
    // 实际上相当于
    const result = await new Promise((resolve, reject) => {
        // 异步操作
    })
}

### wxml####
<view wx:for="{{good_list}}" wx:key="*this">{{item}}</view>

### js###
Page({

  data: {
    good_list: [1, 2, 3]
  },
  // 当滑动到底部还有50rpx时，就会触发这个函数执行---》发送请求获取数据
  onReachBottom() {
    console.log('下拉了')
    // 发送请求获取数据
    wx.request({
      url: 'http://127.0.0.1:8000/app01/random/',
      method:'GET',
      success:(res)=>{
          this.setData({
            good_list:this.data.good_list.concat(res.data)
          })
      }
    })
  },
})

###wxss###
view{
  height: 400rpx;
  display: flex;
  justify-content: center;
  align-items: center;

}

/* 奇数背景色是粉色 */
view:nth-child(odd){
  background-color: pink;
}


/* 偶数背景色绿色 */
view:nth-child(even){
  background-color: rgb(17, 133, 88);
}

  
### json###
{
  "usingComponents": {},
  "onReachBottomDistance": 100
}

###后端###
def random_view(request):
    l = []
    for i in range(3):
        l.append(random.randint(0, 99999))
    return JsonResponse(l,safe=False)  # 返回json格式，如果里面有列表，必须加safe=False

### json中配置###
{
  "usingComponents": {},
  "onReachBottomDistance": 100,
  "enablePullDownRefresh": true,
  "backgroundColor": "#efefef",
  "backgroundTextStyle":"dark"
}

### wxml
<view wx:for="{{good_list}}" wx:key="*this">{{item}}</view>
### js
// 下拉刷新-
onPullDownRefresh(){
    console.log('下拉了，刷新')
    // 只要下来，把数据恢复
    this.setData({
        good_list:[1,2,3]
    })
    // 下拉刷新后，loading效果回弹
    if(this.data.good_list.length==3){
        wx.stopPullDownRefresh()
    }
}

##### wxml####
<scroll-view 
class="scroll"
scroll-y  # 运行y轴滑动
lower-threshold="100" # 距离底部还有100px时，触发事件
bindscrolltolower="handleGetData"# 事件处理函数


refresher-enabled="true"        # 开启 下拉刷新
refresher-default-style="black" # 下拉默认样式
refresher-background="#f0f0f0"  # 下拉背景色
bindrefresherrefresh="handleReload" # 下拉触发事件
refresher-triggered="{{isRefresh}}" # 设置下拉回弹，false允许回弹，

enable-back-to-top="true"  # 快速回到顶部，ios点顶部，安卓点tab
>
  <view wx:for="{{goods}}" wx:key="index">{{item}}</view>
</scroll-view>


### json###
{
  "usingComponents": {}
}

###wxss###
.scroll{
  /* 100vh就是指元素的高度等于当前浏览器的视窗高度,即浏览器内部的可视区域的高度大小 */
  height: 100vh; 
  background-color: grey;
}

view{
  height: 400rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 奇数 */
view:nth-child(odd){
  background-color: pink;
}
/* 偶数 */
view:nth-child(even){
  background-color: green;
}
  
  
#### js####
  data: {
    goods:[1,2,3,4],
    isRefresh:false
  },
  handleGetData(){
    console.log('上拉了')
    // 发送请求，加载数据
    wx.request({
      url: 'http://192.168.71.100:5000',
      method:'GET',
      success:(res)=>{
        console.log(res)
        this.setData({
          goods:this.data.goods.concat(res.data)
        })
  
      }
    })
  },
  handleReload(){
    console.log('下拉刷新了')
    wx.showToast({
      title: '下拉刷新',
    })
    this.setData({
      goods:[1,2,3,4]
    })
    this.setData({
      isRefresh:false
    })
  }

scroll-y  //y轴上刷新
lower-threshold="50"  
bindscrolltolower="handleGet" //绑定上滑加载更多函数
refresher-enabled="true"  //开启下拉刷新
refresher-background="block"
bindrefresherrefresh="chongzhidata"  //绑定下拉刷新函数
refresher-triggered=" {{isrefresh}} "  //绑定是否有下拉动画参数

// app.js
App({
  onLaunch(){
    const update=wx.getUpdateManager()
    update.onUpdateReady(function(){
        wx.showModal({
            title: '发现新版本',
            content: '重启应用，更新版本新版本?',
            success:(res)=>{
                if(res.confirm){
                    update.applyUpdate()
                }
            }
        })
    })
}
})

这段代码是微信小程序中用于检测并应用新版本更新的逻辑。具体解释如下：

在小程序启动时（onLaunch 生命周期函数中），调用 wx.getUpdateManager() 获取全局唯一的版本更新管理器。
通过 update.onUpdateReady() 监听新版本下载完成的事件。
当新版本准备就绪后，弹出一个模态框（wx.showModal），提示用户“发现新版本”，并询问是否重启应用以更新到新版本。
如果用户点击“确定”（res.confirm 为 true），则调用 update.applyUpdate() 方法，强制小程序重启并应用新版本。