微信小程序基础

案例1：两个数比较

一、项目分析

　　1、输入第一个数

　　2、输入第二个数

　　3、进行比较输出结果

二、创建一个空白项目

　　1、新建comepare项目

　　　　

 

 

 　　2、打开项目所在路径

　　　　

 

 

 　　　3、删除除project.config.json外的其他文件和目录。但是这是会出一个错pages目录无法删除

　　　　　

 

 

 　　　　　　　注：只要按照顺序从内部往外删，然后就可以删除了

　　　4、创建一个app.json文件

　　　　　

 

 

　　　5、创建index界面

　　　　在app.json编写如下代码　

{
  "pages": [
  "pages/index/index"
]
}

　　　　然后Ctrl+S保存创建

　　　　　　

 

 

三、页面组件的学习 

　　1、页面组件写在.wxss文件中

　　2、常见的页面组件

页面组件
组件 功能 组件 功能
<view> 视图容器 <icon> 图标文件
<text> 文本域 <checkbox> 复选框
<button> 按钮 <radio> 单选框
<image> 图片 <input> 输入框
<form> 表单 <progress> 进度条

　　3、简单代买实现案例：两个数的比较代码

<!--pages/index/index.wxml-->
<view>
  <text>请输入第1个数字：</text>
  <input type="number1" />
</view>
<view>
  <text>请输入第2个数字：</text>
  <input type="number1" />
</view>
<button>比较</button>
<view>
  <text>比较结果：</text>
</view>

　　　　运行结果的展示：

　　　　　　

 

 

　　4、input 组件type属性

可选值 说明
text 文本输入（默认）
number 数字输入
idcard 身份输入
digit 带小数点的数字

 

　　　　注：number属性在手机上测试时打开的是数字键盘

四、页面样式的学习

　　　1、在wxss文件中的选择器

选择器 实例 说明
.class .a 选择所有class="a"的组件
#id #id 选择所有组件为id="#id"的组件
element view 选择所有view组件
element，element view，text 选择所有view组件和所有text组件
::after view::after 在view组件内的后面插入内容
::before view::before 在view组件的前面插入内容

　　2、不同设备rpx与px换算关系

　　　　①rpx单位规定了任何手机屏幕的宽度都为750px（逻辑像素）

　　　　②物理像素：指屏幕上实际像素

　　　　

 　　3、局部页面样式（index.wxss）

　　　　　在index.wxss编写以下代码

/* pages/index/index.wxss */
view{
  /* 设置外边距50rpx */
  margin:50rpx;
}

input{
  /* 宽度设置为600rpx，上外边距20px，给条2px灰色下边框 */
  width: 600rpx;
  margin-top: 20rpx;
  border-bottom: 2px solid #ccc;
}
button{
  /* 给按钮设置宽度为650rpx，上外边距50px */
  width: 650rpx;
  margin-top:50rpx;
}

　　　　

 

 

 

　　4、导入外部样式（新建test.wxss文件）

　　　　在test.wxss中编写以下代码

button{
  /* 给按钮字体设置为白色，背景设置为蓝色 */
  color: #fff;
  background-color: #369;
}

　　　　然后在index.wxss中用@import"test.wxss"调用

　　　　　

 

 

 　　5、全局样式（新建app.wxss）

　　　　在app.wxss中编写以下代码

button{
  letter-spacing: 12rpx;
}

　　　　

 

 

 五、配置文件

　　1、页面级配置文件

属性 说明
navigationBarBackgroundColor 导航栏背景颜色，默认为“#000000”
navigationBarTextStyle 导航栏标题颜色，（仅支持black，white（默认））
navigationBarTitleText 导航栏标题文字内容
backgroundCorlor 窗口的背景颜色，默认为“#ffffff”
backgroundTextStyle 下拉loading的样式（仅支持dark（默认）、light）
enablePullDownRefresh 是否全局开启下拉刷新，默认为false
onReachBottomDistance 页面上拉触底时间出发时距页面底部距离（px）默认为50px
disableScroll 默认为false，设为true时，页面整体不能上下滚动

　　在index.json中编写以下代码

　　　　

{
  "navigationBarTitleText":"数值比较",
  "navigationBarBackgroundColor":"#369"
}

　　　　

 

 

 　　2、应用级配置文件

属性 说明
pages 页面路径列表
window 全局默认窗口表现
tabBar 底部tab栏的表现
networkTimeour 网络超时时间
debug 是否开启调试模式，默认为false
requiredBackgroundModes 需要在后台使用能力如“音乐播放器”
plugins 使用到的插件

　　　　①networTimeout可以设置网络过程中的超时时间

属性 类型 说明
request Number wx.request()的超时时间（毫秒），默认为60000
connectSocker Number wx.connectSocker()的超时时间（）毫秒，默认60000
uploadFile Number wx.uploadFile()的超时时间（毫秒），默认为60000
downloadFile Number wx.downloadFile()超时s时间（毫秒）默认60000
     

　　应用级配置在app.json中完成

{
  "pages": [
    "pages/index/index"
  ],
  
  "window": {
    "navigationBarTitleText":"数值比较",
    "navigationBarBackgroundColor":"#456"
  }
}

六、页面逻辑

　　1、Page()函数参数对象的属性

属性 类型 说明
data Object 页面初始数据
onLoad Function 生命周期回调函数，监听页面加载
onReady Function 生命周期回调函数，监听页面初始渲染完成
onShow Function 生命周期回调函数，监听页面显示
onHide Function 生命周期回调函数，监听页面隐藏
onUnload Function 生命周期回调函数，监听页面卸载
onPullDownRefresh Function 页面事件处理函数，监听用户下拉动作
onReachBottom Function 页面事件处理函数，页面上触底
onShareAppMessage Function 页面处理函数，用户单击右上角的分享按钮
onPageScroll Function 页面事件处理函数，页面滚动会连接出发
其他 Any 开发者可以添加任意的函数或者数据到data中，在页面的函数中可以通过this.*来访问

　　　　　在index.js中写入以下代码：

　　　　

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

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options)
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    console.log('页面初次加载成功')
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    console.log('页面显示')
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    console.log('此时用户下拉触顶')
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log('此时用户下拉触底')
  },
  onPageScroll:function(obj){
    console.log('此时用户正在滚动页面')
    console.log('滚动距离：'+obj.scrollTop)
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    console.log('share')
  }
})

　　在index.json中写入以下代码

　　

{
  "enablePullDownRefresh":true,
  "onReachBottomDistance":10
}

　　　　运行结果:

　　　　

 

 

　　2、组件事件处理函数用于为组件绑定事件：

　　　　在index.wxml中添加以下代码：

<button bindtap="compare">比较</button>

　　　　然后在index.js中绑定事件

　　　　

  compare: function(e){
    console.log('按钮被点击了')
    console.log(e)
  },

　　运行结果：

　　

 

 

　　3、对比e.target和e.currentTarget:

　　　　在index.wxml中添加以下代码：

<view bindtap="viewtap" id="outer">
  outer
  <view id="inner">
    inner
  </view>
</view>

　　　　绑定事件

viewtap:function(e) {
    console.log(e.target.id+'---'+e.currentTarget.id)
  },

　　4、常用的冒泡事件：

属性 类型
touchastart 手指触摸动作开始
touchmove 手指出触摸后移
touchcancel 手指触摸动作被打断，如来电提醒，弹窗
touchend 手指触摸动作结束
tap 手指触摸后马上离开
longpress 手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发

　　　　①冒泡事件是指当一个组件上的事件被出发后，事件会向父节点传递，而非冒泡事件不会向父节点传递。一些组件还拥有一些专门的事件，如form组件的submit、input组件的input事件等

　　　　②事件冒泡和绑定：

　　　　　　　　

 

 

　　　　代码实现：在index.wxml中添加以下代码

</view>
<view bindtap="outerTap">
  outer
  <view catchtap="middleTap">
    middle
    <view bindtap="innerTap">
      inner
    </view>
  </view>
</view>

　　　　然后在index.js中绑定事件

outerTap:function(e) {
    console.log('outer')
  },
  middleTap:function(e) {
    console.log('middle')
  },
  innerTap:function(e) {
    console.log('inner')
  },

　　　　运行结果：

　　　　　　

 

 

七、注册程序

　　1、在app.js文件中调用App()函数

App({
  //生命周期回调—监听小程序初始化
  // 小程序初始化完成时触发（全局指只触发一次）
  onLaunch: function(options) {
    console.log('onLaunch开始执行')
    console.log(options)
  },
  //生命周期回调-监听小程序显示
  // 小程序启动或者后台进入前台显示时触发
  onShow: function() {
    console.log("onShow执行")
  },
  // 生命周期函数-监听页面隐藏
  //小程序前台进入后台触发
  onHide: function () {
    console.log('onHide执行')
  },
  //错误监听函数
  //小程序发生脚本错误，或者API调用失败时触发
  onError: function(error) {
    console.log('onError执行')
    console.log(error)
  },
  // 页面不存在监听函数
  //小程序要打开的页面不存在时触发
  onPageNotFound:function(options){
    console.log("onPageNotFound执行")
    console.log(options)
  }
})

 

 　　2、onLaunch()和onShow()函数返回的字段

字段 说明
path 打开小程序的路径
query 打开小程序的query
scenne 打开小程序的场景值
share Ticket 获得share Ticke
referrerlnfo 获取来源于小程序、公众号的AppId

　　3、App()函数中还可以保存一些在所有页面中共享的数据：

　　　　①注册数据：

num: 123,
  test: function(){
    console.log("test")
  },

　　　　②打印数据

onReady: function () {
    // console.log('页面初次加载成功')
    // wx.navigateTo({
    //   url: 'pages/test',
    // })
    // throw new Error('')
    var app = getApp()
    console.log(app.num)
    app.test()
  },

 

八、实现比较功能

　　1、各两个input组件绑定不同的事件num1Change、num2Change

<view>
  <text>请输入第1个数字：</text>
  <input type="number"  bindchange="num1Change"/>
</view>
<view>
  <text>请输入第2个数字：</text>
  <input type="number" bindchange="num2Change"/>
</view>

　　2、在index.js中绑定事件

compare: function(e){
    // console.log('按钮被点击了')
    // console.log(e)
    var str='两数相等'
    if (this.num1>this.num2){
      str="第1个数大"
    }else if(this.num1<this.num2){
      str="第2个数大"
    }
    this.setData({
      result: str
    })
    
  },
  num1: 0, //保存第一个数字
  num2: 0, //保存第二个数字
  num1Change: function(e){
    this.num1=Number(e.detail.value)
    console.log("第1个数字："+this.num1)
  },
  num2Change: function(e){
    this.num2=Number(e.detail.value)
    console.log("第2个数字："+this.num2)
  },

　　3、方法二：id 和 dataset方法

　　　　①id方法：

    • 修改index.wxml　
<view>
  <text>请输入第1个数字：</text>
  <input id="num1" type="number"  bindchange="num1Change"/>
</view>
<view>
  <text>请输入第2个数字：</text>
  <input id="num2" type="number" bindchange="num2Change"/>
</view>
    • 在index.js中绑定事件　　　　　　
 Change: function(e){
    console.log(e)
    this[e.currentTarget.id] = Number(e.detail.value)
  },

　　　　②dataset方法：

    • 修改index.wxml
<view>
  <text>请输入第1个数字：</text>
  <input data-id="num1" type="number"  bindchange="Change2"/>
</view>
<view>
  <text>请输入第2个数字：</text>
  <input data-id="num2" type="number" bindchange="Change2"/>
</view>
    • 在index.js中绑定事件
Change2: function(e){
    console.log(e)
    this[e.target.dataset.id] = Number(e.detail.value)

　　4、方法三：text组件上处理计算逻辑

　　　①页面数据比较：

<view >
  <text>比较结果：{{num1>num2 ? '第一个数大':(num1<num2 ? '第二个数大' : '相等')}}</text>
</view>

 

　　　② 事件处理函数：

Change3: function(e){
    var data ={}
    data[e.target.dataset.id] = Number(e.detail.value)
    this.setData(data)
  },

　　5、方法四：通过条件渲染不用点击比较按钮实现比较功能　　

<text wx:if="{{num1>num2}}">比较结果：第一个数大</text>
<text wx:if="{{num1<num2}}">比较结果：第二个数大</text>
<text wx:if="{{num1===num2}}">比较结果：相等</text>

　　6、方法五：表单实现比较功能和重置功能　

<!--pages/index/index.wxml-->
<form bindsubmit="formaCompare">
<view>
  <text>请输入第1个数字：</text>
  <input name="num1" type="number" />
</view>
<view>
  <text>请输入第2个数字：</text>
  <input name="num2" type="number"/>
</view>
<button form-type="submit">比较</button>
<button form-type="reset">重置</button>
</form>
<view >
  <text>比较结果：{{result}}</text>
  
</view>
index.wxml
formaCompare:function(e){
    var num1 = Number(e.detail.value.num1)
    var num2 = Number(e.detail.value.num2)
    var str='两数相等'
    if (num1>num2){
      str="第1个数大"
    }else if(num1<num2){
      str="第2个数大"
    }
    this.setData({
      result: str
    })
  },
index.js

 

 

　　

 

posted @ 2021-04-14 17:25  贫僧敲代码  阅读(711)  评论(0)    收藏  举报