微信小程序

常用的提示框

//成功提示
wx.showToast({
  title: '操作成功',
  icon: 'success',
  duration: 2000
})

//确认删除框
wx.showModal({
  title: '提示',
  content: '确定要删除吗？',
  success: function (res) {
    if (res.confirm) {
      // 用户点击了确定按钮
      console.log('用户点击确定')
      // 执行删除操作
    } else if (res.cancel) {
      // 用户点击了取消按钮
      console.log('用户点击取消')
      // 不执行删除操作
    }
  }
})

//加载中
wx.showLoading({
        title: '加载中',
      })

//1秒后隐藏 加载中
  setTimeout(() => {
        wx.hideLoading()

      }, 1000)


//动态设置标题
wx.setNavigationBarTitle({
      title: 'title',
    })

//滚动标签
<scroll-view scroll-y="true" style="height: 300px;">
  <!-- 内容区域 -->
</scroll-view>

第一步、注册账号

公众平台地址：微信公众平台

安照流程注册小程序，并在浏览器登录自己的 小程序 通过开发，开发设置能获取到appID

第二步、代码开发

3.1 ：全局配置

app.json` 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面 定义在哪个目录。

（pages里面配置页面路径，会自己生成页面解构）

window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。

2.2、tabBar： 底部导航条（iconPath，未选中图标，selectedIconPath选中时图标）

taBar:{

        position :bottom; 仅支持bottom/top 位置

        borderStyle: black; 边框颜色 仅支持black/white

        color:  '#e6e6e6' 未选择的字体颜色

        selectedColor: '#f5f5f5' 选择时字体的颜色

        backgroundColor:'#f5f5f5' taBer的背景颜色

        list:[    必写项 至少要写二个

                {

       "pagePath":"pages/index/index", //路径 必填
        "text":"首页",         //必填 名字
        "selectedIconPath":"img/shouye1.png",  //选中时图标路径position为top时 不显示icon
        "iconPath":"img/shouye2.png" //未选中时图标路径 position为top时 不显示icon

                },

               {

         "pagePath": "pages/logs/logs",
          "text": "关于",
          "selectedIconPath":"img/guanyu1.png",
          "iconPath":"img/guanyu2.png" 

                }

                ]

}

  "tabBar":{
    "list":[
      {
        "pagePath":"pages/index/index",
        "text":"首页",
        "iconPath":"img/shouye2.png",
        "selectedIconPath":"img/shouye1.png"
      
      },
      {
          "pagePath": "pages/logs/logs",
          "text": "关于",
          "iconPath":"img/guanyu2.png",
          "selectedIconPath":"img/guanyu1.png"
          
      }
    ]
  },

123

第三步、语法的改变

 3.1换行用br 不生效，用 \n 代替、空格用\t

<text style="font-size:20px"> 第一行标题 \n </text>

3.2取值表达式：{{}}

<view> {{ message }} </view>

Page({
  data: {
    message: 'Hello MINA!'
  }
})

3.3 隐藏使用

<view hidden="{{flag?true:false}}">show</view>

<view wx:if="{{flag?true:false}}">show</view>

3.4 wx:for循环

<view wx:for="{{array}}"  wx:key="index">  
  {{index}}: {{item.message}}
</view>

默认为item，index 如果想要修改

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如

<view wx:for="{{array}}" wx:key="index" >
  {{index}}: {{item.message}}
</view>        

3.5条件渲染

(在框架中，使用 wx:if="" 来判断是否需要渲染该代码块：)

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。(用view也可以)

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

第四步、模板

4.1模板使用 name名字

<template name='one'>
  <view>我是ones</view>
</template>

<template name='two'>
  <view>我是ones</view>
</template>

4.2//模板使用

is里面是name名字 写那个那个出现 可以重复使用

<template is='one'></template>

4.3//模板引用

新创一个 item.wxml文件 然后里面写 这样引入也可以用

<import src='item.wxml' /> //只能引入template标签

<include src="footer.wxml"/>引入view text等标签都能引入
<template is='item'></template>

第五步、数据的绑定(表单处理)

5.1//view 用 bindtap绑定点击事件   注意后面不加括号

<view  bindtap="funs" data-index="1das"></view> 

传惨 用data- id(这里的id是自定义)传参

使用传参呢去这里的点击事件里面的

  funs(e){

找到传的参数

    console.log(e.target.dataset.index);

  },

5.2//加{{}}数据的双向绑定 

//bindinput="ipt" input的等于就键盘按下事件

<input  value="{{username}}" bindinput="ipt">

5.3//多选框的绑定事件 bindchange="checkboxChange" 

值去checkboxChange 打印e.detail.value

 <checkbox-group bindchange="checkboxChange">

  <label class="checkbox-label">

    <checkbox value="唱">唱</checkbox>

  </label>

  <label class="checkbox-label">

    <checkbox value="跳">跳</checkbox>

  </label>

  <label class="checkbox-label">

    <checkbox value="rap">rap</checkbox>

  </label>

</checkbox-group>

5.4//单选框绑定事件

值去radioChange 打印e.detail.value

<radio-group bindchange="radioChange">

<label>

    <radio checked="true" value="男"/><text>男</text></label>

    <label><radio value="女" /><text>女</text></label>

</radio-group>   

5.5 下拉框事件 bindchange=""

值去bindPickerChange打印e.detail.value 获取是一个下标

   <picker  range="{{array}}" bindchange="bindPickerChange">

    <view class="picker">

      {{array[index]}}

    </view>

    </picker>

5.6 出生日期 选择 

事件bindchange  start 是开始的  end 结束时间

值去onDateChange打印e.detail.value 获取就是你选择的时间

    <picker mode="date" start="1900-01-01" end="2099-12-31" bindchange="onDateChange">

      <view class="picker">{{timer==''?'请选择出生日期':timer}}</view>

      </picker>

六、wxss 学习

6.1尺寸单位 rpx == rem

1rpx等于屏幕宽度的 1/750 索引把设计稿调成750宽度 1px=2rpx 这样可以用rpx单位布局

由于rpx是一个 动态的单位 所以我们布局的页面可以自适应

6.2样式导入

首先要创建一个common.wxss文件

引入@import "common.wxss"

七、事件使用方式

7.1 bindtap

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

7.2 怎么阻止事件冒泡

catchtap=""  把bindtap换成catchtap

<view id="outer" catchtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" catchtap="handleTap3">
      inner view
    </view>
  </view>
</view>

7.3常用事件

1.tap  手指触摸后马上离开

2.touchstart 手指触摸动作开始

3.touchmove 手指触摸后移动

4.touchcancel 手指触摸动作被打断，比如说来点提醒 弹框

5.touchend 手指触摸结束

6.longpress 手指触摸后 停留超过350毫秒

八、生命周期

data:{} 页面初始数据

onLoad(){}  监听页面加载，一个页面只调用一次

onReady(){} 页面初次渲染完成，一个页面只调用一次

onShow(){} 监听页面显示

onHide() { } //监听页面隐藏

 onUnload() { } 监听页面卸载 一个页面只调用一次

监听用户下拉动作 需要在当前about.json里面加

  "enablePullDownRefresh":true 这串代码

onPullDownRefresh() {

console.log(222);

  }

 页面上拉触底事件的处理函数

onReachBottom() {

console.log(111);

  }

用户点击右上角分享

 onShareAppMessage() {

  }

九、全局设置和获取

在app.js里面 globalData 写

  globalData: {

    userInfo: null

     name:'李某人'

  }

怎么使用呢

首先页面顶部：const app = getApp()

页面加载时:

app.globalData.userid = 998888 //设置值

console.log(app.globalData.userid) // 调用值

十、网络请求

wx.request({
  url: 'https://example.com',
  method: 'GET',
  success: function(res) { //成功
    console.log(res.data);
  },
  fail: function() { //失败
    console.log('request failed.');
  },
  complete: function() { //无论成功还是失败
    console.log('request complete.');
  }
});

刚开始域名不合法 先设置合法域名

打开微信小程序平台

打开开发管理 点击开发设置

找到服务器域名 找到request合法域名 配置一下

https://hqc.zzgoodqc.cn 域名

重新编译一下代码 点击详情 点击项目配置 刷新一下 在编译 就好了

wx.request封装

封装

十一、路由跳转和参数传递

<navigator url="/pages/list/list"
 open-type="switchTab" 
hover-class="hoverclass" 
bindtap="btn"
>上传</navigator>

       navigator (难v给得)

11.1url 跳转的地址 url=" /pages/list/list" 记得前面加个/

11.2open-type="navigate"

navigate 跳转子页面 可返回上一级页面

redirect 关闭当前页面 直接返回到首页

switchTab 如果要跳到导航页面  必需要加open-type="switchTab "

reLaunch 也是返回到首页

navigateBack 对应 wx.navigateBack 的功能

11.3 hover-class="hoverclass"

点击的时触发hoverclass里面的样式

11.4bindtap 点击事件

点击事件 不必多说

友情提示如果跳转导航页面必须加 open-type="switchTab"  不调整导航页面不需要加 open-type="switchTab"  

11.5路由怎么传参呢

<navigator url="/pages/details/details?id=666" 
hover-class="hoverclass">上传</navigator>

传参： url="/pages/details/details?id=666"  后面加个?id=""你要传的东西

接受传参： details.js里面生命周期onLoad(option){  }打印option.id

11.6在js中怎么跳转 怎么传参呢

后退导航

wx.navigateBack()

不能跳转底部导航 

 wx.navigateTo({

      url: '/pages/details/details',

    })

只能跳转底部导航

 wx.switchTab({

      url: '/pages/list/list',

    })

传参

 wx.navigateTo({

      url: '/pages/details/details?id="888',

    })

接受传参： details.js里面生命周期onLoad(option){  }打印option.id

十二、手机号拨打

1. 在小程序的json配置文件中添加"makePhoneCall" API权限。

2. 在小程序中引入该API，可以在需要拨打电话的地方调用该API，例如：

    wx.makePhoneCall({
      phoneNumber: e.target.dataset.iphone
    })

1. 将代码上传到微信小程序平台并进行测试。

注意：在调用该API时，需要用户授权，如果用户未授权则无法拨打电话。

十三、下拉刷新 家在需要的.json里面 也可以全局设置 也可以单独

13.1开启下拉刷新

    "enablePullDownRefresh": true, //启动拉下刷新
    "backgroundColor": "#e6e6e6",    //下拉刷新的背景颜色
    "backgroundTextStyle": "dark", //会闪 可选值light dark

13.2停止下拉刷新

wx.stopPullDownRefresh()

十四、上拉触底事件

事件函数

  onReachBottom() {

  },

    "onReachBottomDistance": 50  // px可以省略 设置上拉到底部触发的距离 默认50px

123

十五、组件的使用

步骤一

在小程序项目中添加一个components文件夹，里面存放自定义的组件，然后在components目录下新建一个orderItem文件夹,文件夹可以命名为自定义组件名字相关，用来存放自定义的组件。

点击orderItem右键 新建一个

 然后输入项目名字 创建完成

步骤二 

接下来进行组件的相关配置：
首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可这一组文件设为自定义组件）：

{
  "component": true,
  //引用其他组件，这里没有引用其他组件
  "usingComponents": {}
}

步骤三

在需要使用组件的项目.json文件中注册组件

{
  "usingComponents": {
    "yjsc": "/components/shop/yjsc"  //yjsc就是组件的标签名
  }
}

15.2组件传参 父传子

父组件

  <yjsc arr="888"></yjsc>

子组件中 .js文件properties接受参数

 properties: {

    arr: {

      type: Array,   //判断传过来的数据类型

    }

  },

使用 {{arr}}

15.3插槽使用

父组件

  <yjsc arr="888">插槽在这里传值</yjsc>

子组件 slot接受

<slot></slot>

15.4子传父

子组件中

<button bindtap="btn">子传父</button>

.js中 在methods写

 methods: {

    btn(e) {

      console.log(e);

      this.triggerEvent('abc', this.data.str) //abc 传参的名称

    }

  }

父组件中 bind:名称=" "

    <yjsc arr="{{arr}}" bind:abc="abcfq">  

            我是插槽传参

    </yjsc>

.js中写

  abcfq(e) {

    console.log(e.detail, 7777); e.detail就是传的值

  },

十六、组件的生命周期

组件的生命周期

1. created 组件实例化，但结点输还未导入，因此这时不能用setData
2. attached（啊他吃特） 节点树完成，可以用setData渲染节点，但无法操作节点
3. ready （ru'ai丁）组件布局完成，这时可以获取节点信息，也可以操作节点
4. moved (move 特)组件实例被移动到树的另一个位置
5. detached(都他吃特) 组件实例从节点树移除               

    生命周期容器

    lifetimes(来f太木斯) : {} 以上都写到容器里面