tnblog
首页
登录

微信小程序学习笔记

610人阅读 2020/1/6 9:59 总访问:2266 评论:1 手机 收藏
分类: 小程序

小程序是什么?

小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载

小程序目录结构

.js/,json/.wxml/.wxss组成页面

小程序配置.json

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

Pages:配置小程序页面路径

Window:用于设置小程序的状态栏、导航条、标题、窗口背景色。

tabBar:如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面

小程序生命周期

onLaunch:监听小程序初始化时
onShow:监听小程序启动或切前台
onHide:监听小程序切后台。
onError:错误监听函数。
App:共享给所有页面使用在页面值使用getApp()得到app实例并使用里面定义的方法与变量
页面生命周期


// pages/index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    type:""
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  }
})

页面跳转(路由)

组件跳转:navigator

url:跳转的路径
open-type:跳转方式
navigatorTo:打开新页面 默认打开方式
redirectTo :重定向
navigateBack :返回上一页
switchTab :打开tab选项卡  在app.js中的tabbar配置过得页面这位tab选项卡页面而选项页面只能用该类型打开
reLaunch :重新打开

js跳转:

wx.navigatorTo:打开新页面
wx. redirectTo :重定向
wx. navigateBack :返回上一页
wx. switchTab :打开tab选项卡
wx. reLaunch :重新打开

页面与页面之间路由传值:

路径传值:pages/info/info?id=1
得值:在页面的onload生命周期中使用options.id即可
数据绑定
在wxml中使用“{{str}}”的方式绑定数据

循环绑定数据

使用wx:for=”{{obj}}”
可以使用wx:for-index设置索引的名称如果不设置默认为index
Wx:for-item设置循环后每项值得名称不设置默认为item

<view wx:for="{{arr}}" wx:key="{{this}}">
  {{index}}----{{item}}
</view>


模板

注意:模板不是组件
模板只是一个被template包裹的一个代码块而已并不是组件

<template name="mytemp">
      <view>我是一个模板传递进来的值为:{{name}}</view>
</template>
<template is="mytemp" data="{{name}}"></template>
<template is="mytemp" data="{{name}}"></template>

引用模板:

创建一个.wxml文件在里面编写模板

使用import引入模板文件

<template name="myclass">
  <view class="list-box">
    <view wx:for="{{datalist}}" wx:key="{{this}}" class="list-item">
      <view>
        <image src="{{item.src}}"></image>
      </view>
      <view>{{item.title}}</view>
    </view>
  </view>
</template>

引用:

<import src="../../template/list.wxml" />
<template is="myclass" data="{{datalist}}"></template>

组件

小程序中的组件原理vue、angular等js框架原理类似。可以父组件向子组件传值、子组件向父组件传值、

注意组件不是页面:创建的组件的js文件中构造函数是component而页面的js中是page、同时创建的组件也不会存在app.js中的pages字段中

slot

Component的slot(slot意思是插槽),主要是让你在外部的wxml可以自由的在你的Component的wxml里插入模块。默认情况下,一个组件的wxml只可能有一个slot。需要使用多个时,可以在组件js中声明启用。

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: { /* ... */ },
  methods: { /* ... */ }
})

使用多个插槽

<web39-nav><view slot="one">123456</view><view slot="two">哈哈哈</view></web39-nav>

组件样式编写注意事项

? 组件和引用组件的页面不能使用id选择器(#a)、属性选择器([a])和标签名选择器,请改用class选择器。

? 组件和引用组件的页面中使用后代选择器(.a .b)在一些极端情况下会有非预期的表现,如遇,请避免使用。

? 子元素选择器(.a>.b)只能用于 view 组件与其子节点之间,用于其他组件可能导致非预期的情况。

? 继承样式,如 font 、 color ,会从组件外继承到组件内。

? 除继承样式外, app.wxss 中的样式、组件所在页面的的样式对自定义组件无效

创建一个组件

一个组件需要包括json、wxml、wxss、js四个文件组成
创建一个文件夹component来存放公共组件
在component文件夹中穿件自己的组件选择新建component即可
创建组件后组件.json中存在声明组件配置

Component:true

Data:

初始化数据

data: {
    obj:"小明"
  },

Methods

组件内自定义函数

<text bindtap="myclick" data-index="{{index}}">{{item}}</text>
myclick:function(e){
      var index = e.target.dataset.index
      console.log(this.data.datalist[index]);
}

使用组件

在需要使用组件的页面json文件中引入与配置组件名如:

"usingComponents": {
    "web39-nav":"/components/nav/nav"
  }

在页面wxml中使用并向nav组件传值

<web39-nav title=”{{shoptitle}}”></web39-nav>

父组件向子组件传值:

1、 创建接受传值的参数:
在js文件中的component函数中的properties用于声明属性(也就是接受的参数):

properties: {
     title:{
       type:String,
       value:"这是标题"
     }
  },

组件向页面传值
组件向页面传值是使用的出发自定义事件的方式传递

在组件中使用this.triggerEvent()出发页面中定义的自定义事件并传值页面中定义函数来接受传值

页面中自定义事件使用bind:xxx 其中getdata为接收组件传递过来值得函数

<web39-nav bind:getcom="getdata" title="首页" datalist="{{listdata}}"></web39-nav>

组件中出发自定义事件

myclick:function(e){
      var index = e.target.dataset.index
      //出发页面上自定义的事件名
      this.triggerEvent("getcom", this.data.datalist[index])
}

创建组件步骤:

1、 声明组件

2、 接收传值

3、 挂载子组件

4、 使用子组件并传递数据


小程序api

界面设置

交互:

ShowToast:消息提示框
wx.showToast({
title: ‘提示框会自动消失’,
icon:“none”
})
showModal:模态对话框
wx.showModal({
title: ‘对话框’,
content: ‘是否xxx?’,
success:function(res){
if(res.confirm){
console.log(“点击了确定”)
}
}
})
showLoading:显示预加载效果
hideLoading:隐藏预加载效果
wx.showLoading({
title: ‘加载中’,
})
setTimeout(function(){
wx.hideLoading();
},2000)

导航栏

showNavigationBarLoading

在当前页面显示导航条加载动画

hideNavigationBarLoading

在当前页面隐藏导航条加载动画

setNavigationBarTitle

动态设置当前页面的标题

setNavigationBarColor

设置页面导航条颜色

hideHomeButton

隐藏返回首页按钮

pagescrollTo滚动到页面指定位置(可以设置指定px位置也可以滚动到指定节点)

wx.pageScrollTo({
selector:"#"+id
})

网络

request

发起请求

注意:在发起网络请求是一定要在开发设置中去配置服务器地址

downloadFile

文件下载


WebSocket即时通讯(聊天)

分为4个步骤

1、 链接socket地址

connectSocket

创建一个 WebSocket 连接

2、 接受响应数据

onSocketMessage

接受响应数据

3、 发生数据

sendSocketMessage

4、 关闭链接

closeSocket

数据缓存

Storage

视频

使用createVideoContext方法创建一个视频对象返回一个VideoContext对象所有视频操作方法属性都在其中

Ui框架的使用vant weapp

引入方式有两种

下载vant组件包放置到项目更目录进行引入使用

下载ui组件库下载地址:https://github.com/youzan/vant-weapp

下载完毕后把解压出来的dist文件拷贝到项目根目录即可


使用:在app.json或指定的页面.json中引入如下:

“usingComponents”:{
“van- field”:”/dist/ field/index”
}

使用npm下载并引入使用

使用npm安装引用

1、 在项目根目录下命令行工具中输入npm init

2、 输入 npm install –production

3、 安装 npm i vant-weapp –S –production

4、 点击菜单中的工具构建npm 并选择使用npm包


组件中使用:

在app.json或指定的页面.json中引入如下:

“usingComponents”:{
“van- field”:”vant-weapp/ field”
}

在wxml中使用即可




评价
不喜欢写代码的程序员
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2020TNBLOG.NET
技术交流:群号677373950
欢迎加群交流技术