微信小程序开发（草稿）

目录

demo例子1

 

demo例子2

​

dome例子3

​

dome例子4

demo例子5

demo例子6

 demo例子6（手机系统的一些参数）

 demo例子7

---

 

enablePullDownRefresh:设置全局或单个页面的下拉刷新

 '''请注意是true，不是"true"字符串，
    部分开发者发现设置了还是无效，
    可能是因为设置的"enablePullDownRefresh": "true"
    json中的配置'''
"enablePullDownRefresh": true


'''别人的小程序，下拉刷新时，可以看到顶部有三个点闪烁的动画；而我的小程序顶部一片空白。'''
"backgroundTextStyle": "dark"


'''小程序提供的api，通知页面停止下拉刷新效果'''
wx.stopPullDownRefresh;

'''js中的下拉回调函数'''
onPullDownRefresh: function () {
    console.log('onPullDownRefresh')
    this.queryData(id)
},

 disableScroll:页面是否开启滚动

'''disableScroll无法禁止小程序下拉的问题
   disableScroll的优先级小于enablePullDownRefresh，因此如果app.json里是    
   enablePullDownRefresh:true，那如果只是在page.json中加上disableScroll:true是无效的
   需要在page.json中同时加上enablePullDownRefresh:false:'''
"windos":{
    "enablePullDownRefresh":false,
    "disableScroll":true
}

demo例子1

<!-- index.wxml -->
<view>
  <block wx:for="{{items}}" wx:for-item="item" wx:key="index">
    <view>{{index}}:{{item.name}}</view>
  </block>
</view>
<!-- index.js -->
Page({
  data: {
    items: [
      { name: "商品A" },
      { name: "商品B" },
      { name: "商品C" },
      { name: "商品D" }
    ]
  }
}

 

demo例子2

<!-- index.wxml -->
<view>今天吃什么？</view>
<view wx:if="{{condition === 1}}"> 
  饺子
</view>
<view wx:elif="{{condition === 2}}">
  米饭
</view>
<view wx:else>
  面食
</view>
<!-- index.js -->
Page({
  data: {
    condition: Math.floor(Math.random()*3+1)
  }
}

dome例子3

<!-- index.wxml -->
<!--使用ES6展开运算符 -->
<template is="courseStudent" data="{{...item}}"></template>

<template name="courseStudent">
  <!-- 此处渲染数据的时候就不需要使用 item.xxx了-->  
  <view>姓名: {{courseName}}</view>
</template>

//index.js
Page({
  data: {
    item:{
      courseName:"张三"
    }
  }
}

dome例子4

<!-- index.wxml -->
<import src="a.wxml"></import>
<template is="a"></template>

<!-- a.wxml -->
<!-- improt 是引入  src是引入具体文件路径-->
<!-- template 可以看变量 name是赋值  is是引用 -->
<import src="b.wxml"></import>
<template name="a">
  a_Hello,World！
<view>
  <template is="b"></template>
</view>
</template>

<!-- b.wxml -->
<template name="b">
  b_Hello,World！
</template>

 

demo例子5

<!-- index.wxml -->
<!-- include 引入的是页面
     import 引入的是template 中的name -->
<include src="a.wxml"/>
<template is="a"></template>

<!-- a.wxml -->
<template name="a">
  <view>
    This is a.wxml
  </view>
</template>
<view>Hello,world</view>

demo例子6

<!-- index.wxml -->
<wxs module="m1">
  module.exports = {
    message:'Hello,world!'
  }
</wxs>
<view>{{m1.message}}</view>

<wxs src="./m2.wxs" module="m2"></wxs>
<view>{{m2.message}}</view>


<!-- m2.wxs-->
module.exports = require('./m1.wxs')

<!-- m1.wxs-->
module.exports = {
  message:"hello world!"
}

 

 demo例子6（手机系统的一些参数）

<!-- index.js --> 
onLoad: function () {
    var sys = wx.getSystemInfoSync();
    console.log(sys);
    console.log("可使用窗口宽度" + sys.windowWidth);
    console.log("可使用窗口高度" + sys.windowHeight);
    console.log("手机型号:" + sys.model);
    console.log("设备像素比:" + sys.pixelRatio);
    console.log("微信设置语言:" + sys.language);
    console.log("微信的版本号:" + sys.version);
    console.log("客户端基本库版本:" + sys.SDKVersion);
    console.log("any:" + sys.batteryLevel);
    console.log("手机品牌:" + sys.brand);
    console.log("用户字体大小设置:" + sys.fontSizeSetting);
    console.log("客户端平台:" + sys.platform);
    console.log("屏幕高度:" + sys.screenHeight);
    console.log("屏幕宽度:" + sys.screenWidth);
    console.log("状态栏的高度:" + sys.statusBarHeight);
    console.log("操作系统版本:" + sys.system);
  },

 demo例子7

<!-- index.js --> 
onLoad: function () {
    wx.getSystemInfo({
      success(res){
        console.log(res);
        console.log("设备品牌" + res.brand);
        console.log("设备型号" + res.model);
        console.log("设备像素比:" + res.pixelRatio);
        console.log("屏幕宽度，单位px:" + res.screenWidth);
        console.log("屏幕高度，单位px:" + res.screenHeight);
        console.log("可使用窗口宽度，单位px:" + res.windowWidth);
        console.log("可使用窗口高度，单位px:" + res.windowHeight);
        console.log("状态栏的高度，单位px:" + res.statusBarHeight);
        console.log("微信设置的语言:" + res.language);
        console.log("微信版本号:" + res.version);
        console.log("操作系统及版本:" + res.system);
        console.log("客户端平台:" + res.platform);
        console.log("用户字体大小:" + res.fontSizeSetting);
        console.log("客户端基础库版本:" + res.SDKVersion);
        console.log("设备性能等级:" + res.benchmarkLevel);
      }
   })
},