精华内容
下载资源
问答
  • 微信小程序学习笔记

    2021-03-26 11:51:29
    一、微信小程序pk网页 1、微信小程序是不是网页? 微信小程序使用的是wxml绘制页面结构,wxss绘制页面样式,js实现页面逻辑。好像和网页的html+css+js类似,其实他们之间还是有很多不同的: 网页的运行环境是浏览器...

    原文链接

    一、微信小程序pk网页

    1、微信小程序是不是网页?

    微信小程序使用的是wxml绘制页面结构,wxss绘制页面样式,js实现页面逻辑。好像和网页的html+css+js类似,其实他们之间还是有很多不同的:

    1. 网页的运行环境是浏览器(webview);小程序只是wxml+wxs运行在webview中,js是单独的一个线程
    2. 网页的页面跳转、前进、后退都是在同一个浏览器(webview)中完成的;小程序的每一个页面都是一个新的webview,这些页面存在程序栈中,最多10个webview
    3. 微信小程序是运行在一个新的进程中,是一个新的程序,和微信独立运行;网页的话是依赖宿主环境的。
    4. 小程序不是网页,但是小程序是混合开发(更深)

    2、微信小程序的工作原理

    1. 为了达到app的极致体验,微信采用 ZSTD 算法对小程序代码包进行压缩,以尽可能降低下载过程中传输的数据量,在第一次打开小程序的时候将压缩包下载到本地,从而减少资源请求
    2. 小程序的渲染层和逻辑层分别由2个线程管理:渲染层的界面使用了WebView 进行渲染;逻辑层采用JsCore线程运行JS脚本,这两个线程的通信会经由微信客户端(下文中也会采用Native来代指微信客户端)做中转
    3. 逻辑层发送网络请求经由Native转发

    在这里插入图片描述

    3、微信小程序和网页的优劣对比

    1. 小程序的页面加载的速度明显比网页快;(资源提前缓存了;渲染线程和逻辑线程共同工作)
    2. 小程序的js动画没有网页的js动画流畅;(小程序的js操作dom需要逻辑线程和渲染线程通过native交互,有损耗;微信提供了wxs解决这个问题)
    3. 网页的适应性强,只要有浏览器(webview)就可以运行;小程序必须依赖微信环境(或微信开发这工具)
    4. 小程序可以获取微信开放的更多信息

    二、微信生态开放的信息

    在这里插入图片描述

    注:

    获取用户手机号:

    获取用户信息:

    三、开发框架

    微信提供的语言有自己的语法,有一定的学习成本;各大app都有自己的小程序,每个小程序的语法可能不同;

    所有选择框架是开发小程序的不二选择,市面上的框架大同小异,技术选择就看自己的实际情况而定;

    1、kbone(官方)

    官方推荐的框架;kbone 是一个致力于微信小程序和 Web 端同构的解决方案。

    因为 kbone 是通过提供适配器的方式来实现同构,所以它的优势很明显:

    • 大部分流行的前端框架都能够在 kbone 上运行,比如 Vue、React、Preact 等。
    • 支持更为完整的前端框架特性,因为 kbone 不会对框架底层进行删改(比如 Vue 中的 v-html 指令、Vue-router 插件)。
    • 提供了常用的 dom/bom 接口,让用户代码无需做太大改动便可从 Web 端迁移到小程序端。
    • 在小程序端运行时,仍然可以使用小程序本身的特性(比如像 live-player 内置组件、分包功能)。
    • 提供了一些 Dom 扩展接口,让一些无法完美兼容到小程序端的接口也有替代使用方案(比如 getComputedStyle 接口)。

    2、uni-app(Dcloud)

    uni-app的优势:

    • uni-app是一套可以适用多端的开源框架,一套代码可以同时生成ios,Android,H5,微信小程序,支付宝小程序,百度小程序等。
    • uni-app对前端开发人员比较友好,学习成本比较低,首先uni-app是基于vue.js的。其次封装的组件和微信小程序的组件一毛一样,所以对于现在的主流前端人员来说学习几乎0成本,如果你作为一个前端,没有接触过vue和微信小程序的话那建议你多去加加油了。
    • uni-app使用hbuilderX进行开发,hbuilderX对于vue语法等支持可以说是比较完备了。使用hbuilderX进行开发开发速度比较快

    3、mpvue(美团)

    mpvue的优势:

    • 彻底的组件化开发能力:提高代码复用性
    • 完整的 Vue.js 开发体验
    • 方便的 Vuex 数据管理方案:方便构建复杂应用
    • 快捷的 webpack 构建机制:自定义构建策略、开发阶段 hotReload
    • 支持使用 npm 外部依赖
    • 使用 Vue.js 命令行工具 vue-cli 快速初始化项目
    • H5 代码转换编译成小程序目标代码的能力

    4、Taro(京东)

    taro的优势:

    • 框架支持,在 Taro 3 中可以使用完整的 React/Nerv / Vue/Vue3 开发体验
    • 多端适配,目前 Taro 3 可以支持转换到 微信/京东/百度/支付宝/字节跳动/QQ 小程序 以及 H5 端。

    四、可能会遇到的问题

    1、动画卡顿

    现象:css3动画性能还好,js的手势动画会比较卡顿

    原因:小程序js操作dom需要逻辑层和渲染成交互,有性能问题

    解决办法:使用wxs开发js动画,wxs是小程序提供的一个运行在渲染层的阉割版js主要是用来处理频繁的js操作dom问题

    2、首页自定义tab

    现象:微信小程序提供了原生的tab,但是样式单一,不支持修改;官方提供的自定义tab的解决办法,会导致tab闪烁

    原因:…

    解决办法:将首页使用单页面实现,底部使用公共的tab组件,做好页面优化,性能还是可以的,办法随笨,不过问题解决了

    3、opacity动画卡顿

    现象:滚动时,顶部导航,透明度渐现动画,在opacity变为1时卡一下;

    原因:opacity的值有0.9变为1时,会卡顿,原因…

    解决办法:在设置opacity的值时,设置为0.9999,接近1但是不为1,这就规避了这个问题,不过这可能不是最好的解决办法。

    五、总结

    不经历风雨怎么能见到彩虹,小程序的诞生伴随着一个又一个的问题,新的问题同样会带来新的挑战,只有正面问题,迎难而上,将问题一一解决,才能不断成长不断进步。在未来工作中,应该积极发现问题、解决问题,将小程序做的更好。

    展开全文
  • 主要介绍了微信小程序学习笔记之本地数据缓存功能,结合实例形式分析了微信小程序wx.setStorage、wx.getStorage以及wx.removeStorage、wx.clearStorage针对数据缓存的存取、删除等相关操作技巧,需要的朋友可以参考下
  • 本文实例讲述了微信小程序学习笔记之跳转页面、传递参数获得数据操作。分享给大家供大家参考,具体如下: 前面一篇介绍了微信小程序表单提交与PHP后台数据交互处理。现在需要实现点击博客标题或缩略图,跳转到博客...
  • 本文实例讲述了微信小程序学习笔记之目录结构、基本配置。分享给大家供大家参考,具体如下: 结束了一段时间的学习,开始一段新的学习旅程 —— 微信小程序。现在出去找工作只会PHP、HTML+CSS、JS什么的不够了,...
  • 本文实例讲述了微信小程序学习笔记之表单提交与PHP后台数据交互处理。分享给大家供大家参考,具体如下: 前面一篇结介绍了微信小程序函数定义、页面渲染。这里介绍form表单提交与后台php数据交互处理。 【form表单...
  • 打开EgretWing->文件->打开文件夹..,然后选择刚才你的微信小程序的所在文件夹就好。然后就可以愉快地编写代码了,如图。  (此图片来源于网络,如有侵权,请联系删除! )   二:进行debug 开发过程中debug的重要性...
  • 本文实例讲述了微信小程序学习笔记之获取位置信息操作。分享给大家供大家参考,具体如下: 前面介绍了微信小程序文件上传、下载操作。这里分析一下获取位置信息操作。 【获取当前位置信息】wx.getLocation() ...
  • 本文实例讲述了微信小程序学习笔记之登录API与获取用户信息操作。分享给大家供大家参考,具体如下: 前面介绍了微信小程序跳转页面、传递参数获得数据,这里来分析一下登录API与获取用户信息操作方法。 【小程序...
  • 本文实例讲述了微信小程序学习笔记之文件上传、下载操作。分享给大家供大家参考,具体如下: 前面介绍了微信小程序登录API与获取用户信息操作。这里再来介绍一下文件的上传与下载操作。 【文件上传】wx.uploadFile ...
  • 小程序学习笔记一、微信小程序简介微信小程序优点:二、微信小程序环境准备2.1 申请帐号2.2 安装开发工具 一、微信小程序简介 微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用...

    小程序学习笔记


    一、微信小程序简介

    1、微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用触手可及"的梦想,用户扫一扫或搜一下即可打开应用。

    2、微信小程序,之前叫应用号,2017年正式上线

    3、学习微信小程序之前,强烈建议先学习vue.js,学了之后再学超级快

    4、微信小程序优点:

    • 微信有海量用户,且粘性很高,在微信里开发产品更容易触达用户
    • 推广app或公众号的成本太高
    • 开发适配成本低
    • 容易小规模试错,然后快速迭代
    • 跨平台

    二、微信小程序环境准备

    2.1 申请帐号

    1. 进入小程序注册页根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号
    2. 你也可以管理你的小程序的权限,查看数据报表,发布小程序等操作。通过登录小程序后台,可以在菜单 “开发”-“开发设置” 看到小程序的 AppID 了 (记得保密)

    2.2 安装开发工具

    前往 小程序开发工具下载页面 ,根据自己的操作系统下载对应的安装包进行安装

    2.3 编译预览

    这里推荐用vs code编辑,小程序开发工具预览

    vscode 小程序开发插件
    (一)minapp。支持微信小程序标签、属性的智能补全,并且提示中包含文档内容(同时支持原生小程序、mpvue 和 wepy 框架,并提供 snippets)。
    (二)wechat-snippet。这个插件主要的功能就是代码辅助,代码片段自动完成,可以作为上个插件的补充。
    (三)wxml。这款插件用于将wxml代码进行高亮显示,并且提供代码格式化的功能,可将代码格式化为较易阅读的样式。
    (四)vscode weapp api 。js中的api提示


    三、小程序代码构成

    通过开发者工具快速创建了一个 QuickStart 项目,里面有以下不同类型文件:

    • .json 后缀的 JSON 配置文件
    • .wxml 后缀的 WXML 模板文件
    • .wxss 后缀的 WXSS 样式文件
    • .js 后缀的 JS 脚本逻辑文件

    四、JSON配置

    配置相关的为.json文件,需要注意的是 JSON 文件中无法使用注释,试图添加注释将会引发报错

    4.1 小程序配置 app.json

    app.json 是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。QuickStart 项目里边的 app.json 配置内容如下:

    {
      "pages":[//页面路由,在这里添加路由可以自动生成对应文件
        "pages/index/index",
        "pages/logs/logs",
        "pages/demo01/demo01"
      ],
      "window":{//定义小程序所有页面的顶部背景颜色,文字颜色定义等
      	//下拉 loading 的样式,仅支持 dark / light
        "backgroundTextStyle":"light",
        //导航栏的样式
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle":"black"
      },
      "style": "v2",
      "sitemapLocation": "sitemap.json"
    }
    

    4.2工具配置 project.config.json

    个性化配置,例如界面颜色、编译配置等等,避免了当你换另外一台电脑重新安装工具的时候再重新配置。

    4.3 页面配置 page.json

    表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置,可对每个页面进行单独配置

    4.4 sitemap 配置-了解即可

    ⼩程序根⽬录下的 sitemap.json ⽂件⽤于配置⼩程序及其⻚⾯是否允许被微信索引

    五、模板WXML

    1. 标签名字有点不一样
    HTML标签div, p, span等
    小程序WXMLview, button, text等
    1. 多了一些 wx:if 这样的属性(界面及状态的控制)以及 {{ }} 这样的表达式(数据绑定)

    2. MVVM 的开发模式(例如 React, Vue),提倡把渲染和逻辑分离
      WXML是框架设计的⼀套标签语⾔,结合基础组件、事件系统,可以构建出⻚⾯的结构

    5.1 数据绑定

    (一)普通写法
    index.wxml

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

    index.js

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

    (二)组件属性
    index.wxml

    <view id="item-{{id}}"> </view>
    

    index.js

    Page({
      data: {
        id: 0
      }
    })
    

    (三)bool类型
    不要直接写 checked=“false”,其计算结果是⼀个字符串

    <checkbox checked="{{false}}"> </checkbox>
    

    5.2 运算

    (一)三元运算

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

    (二)if 逻辑判断

    <view wx:if="{{length > 5}}"> </view>
    

    注意:花括号和引号之间如果有空格,将最终被解析成为字符串,切记不要留有空格

    5.3 列表渲染

    (一)wx:for

    • 项的变量名默认为 item wx:for-item 可以指定数组当前元素的变量名
    • 下标变量名默认为 index wx:for-index 可以指定数组当前下标的变量名
    • wx:key ⽤来提⾼数组渲染的性能
    • wx:key 绑定的值 有如下选择:
      1. string 类型,表⽰循环项中的唯⼀属性 如
    list:[{id:0,name:"炒饭"},{id:1,name:"炒面"}]
     
    wx:key="id"
    
      1. 保留字 *this ,它的意思是 item 本⾝ ,*this 代表的必须是 唯⼀的字符串和数组。
    list:[1,2,3,4,5]
     
    wx:key="*this"
    

    代码:

    <view wx:for="{{array}}" wx:key="id">
      {{index}}: {{item.message}}
    </view>
    
    Page({
      data: {
        array: [{
          id:0,
          message: 'foo',
        }, {
          id:1,
          message: 'bar'
        }]
      }
    })
    

    (二)block
    渲染⼀个包含多节点的结构块 block最终不会变成真正的dom元素

    <block wx:for="{{[1, 2, 3]}}" wx:key="*this" >
      <view> {{index}}: </view>
      <view> {{item}} </view>
    </block>
    

    5.4 条件渲染

    (一)wx:if
    在框架中,使⽤ wx:if="{{condition}}" 来判断是否需要渲染该代码块:

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

    (二)hidden(类似 wx:if)

    <view hidden="{{condition}}"> True </view>
    

    频繁切换 ⽤ hidden
    不常使⽤ ⽤ wx:if

    5.5 事件绑定

    ⼩程序中绑定事件,通过bind关键字来实现。如 bindtap bindinput bindchange 等
    代码:

    <!-- 1.需要给input标签绑定 input事件
    绑定关键字 bindinput
    2.如何获取输入框的值
    通过事件源对象获取e.detail.value
    3.把输入框的值赋值到data中
    错误:this.data.num = e.detail.value
    正确:
    this.setData({
      num: e.detail.value
    })
    4.需要加入一个点击事件
          bindtab
          无法在小程序中的事件直接传参
          通过自定义属性的方式传递参数
          事件源中获取自定义属性 -->
    
    <input type="text" bindinput="handleInput"/>
    <button bindtab="handleTab" data-operation="{{1}}">+</button>
    <button bindtab="handleTab" data-operation="{{-1}}">-</button>
    <view>{{num}}</view>
    
    Page({
      data: {
        num: '0'
      },
      handleInput(e) {
        // 绑定的事件
        console.log(e)
        console.log(e.detail.value);
        this.setData({
          num: e.detail.value
        })
      },
      // 加减按钮事件
      handleTab(e) {
        console.log(e);
        // 获取自定义属性operation
        const operation = e.currentTarget.dataset.operation
        this.setData({
          num: this.data.num + operation
        })
      }
    })
    

    六、样式 WXSS

    WXSS( WeiXin Style Sheets )是⼀套样式语⾔,⽤于描述 WXML 的组件样式。
    与 CSS 相⽐,WXSS 扩展的特性有:

    • 响应式⻓度单位 rpx
    • 样式导⼊

    6.1 尺寸单位

    (1)rpx (responsive pixel): 可以根据屏幕宽度进⾏⾃适应。规定屏幕宽为 750rpx 。如在iPhone6 上,屏幕宽度为 375px ,共有750个物理像素,则 750rpx = 375px = 750物理像
    素 , 1rpx = 0.5px = 1物理像素

    设备rpx换算px (屏幕宽度/750)px换算rpx (750/屏幕宽度)
    iPhone51rpx = 0.42px1px = 2.34rpx
    iPhone61rpx = 0.5px1px = 2rpx
    iPhone6 Plus1rpx = 0.552px1px = 1.81rpx

    (2)建议: 开发微信⼩程序时设计师可以⽤ iPhone6 作为视觉稿的标准
    (3)使⽤步骤:

    1. 确定设计稿宽度 pageWidth
    2. 计算⽐例 750rpx = pageWidth px ,因此 1px=750rpx/pageWidth 。
    3. 在less⽂件中,只要把设计稿中的 px => 750/pageWidth rpx 即可。
    4. 代码写法
    /* width: 200rpx; */
    width: calc(700rpx*100/375);
    

    6.2 样式导⼊

    • wxss中直接就⽀持,样式导⼊功能。
    • 也可以和 less中的导⼊混⽤。
    • 使⽤ @import 语句可以导⼊外联样式表,只⽀持相对路径。

    示例代码:

    /** common.wxss **/
    .small-p {
      padding:5px;
      color:red;
    }
    
    /** app.wxss **/
    @import "common.wxss";
    .middle-p {
      padding:15px;
      color:blue;
    }
    

    6.3 选择器

    特别需要注意的是 ⼩程序 不⽀持通配符 * 因此以下代码⽆效!

    *{
        margin:0;
        padding:0;
        box-sizing:border-box;
    }
    

    ⽬前⽀持的选择器有:

    选择器样例样例描述
    .class.intro选择所有拥有 class="intro"的组件
    #id#firstname选择拥有 id="firstname"的组件
    elementview选择所有 view 组件
    element,elementview,checkbox选择所有⽂档的 view 组件和所有的 checkbox 组件
    nth-child(n)view:nth-child(n)选择某个索引的标签
    ::afterview::after在 view 组件后边插⼊内容
    ::beforeview::before在 view 组件前边插⼊内容

    6.4 ⼩程序中使⽤less

    (1)原⽣⼩程序不⽀持 less ,其他基于⼩程序的框架⼤体都⽀持,如 wepy , mpvue , taro 等。
    (2)但是仅仅因为⼀个less功能,⽽去引⼊⼀个框架,肯定是不可取的。因此可以⽤以下⽅式来实现

    1. 编辑器是 vscode
    2. 安装插件 easy less
    3. 在vs code的设置中加⼊如下配置:
     "less.compile": {
            "outExt":       ".wxss"
        }
    
    1. 在要编写样式的地⽅,新建 less ⽂件,如 index.less ,然后正常编辑即可。 会自动转换为 wxss代码的文件

    七、 常见组件

    重点讲解⼩程序中常⽤的布局组件
    view,text,rich-text,button,image,navigator,icon,swiper,radio,checkbox 等

    7.1 view

    代替 原来的 div 标签

     <view hover-class="h-class">
      点击我试试
      </view>
    

    7.2 text

    1. ⽂本标签
    2. 只能嵌套text
    3. ⻓按⽂字可以复制(只有该标签有这个功能)
    4. 可以对空格 回⻋ 进⾏编码
    属性名类型默认值说明
    selectableBooleanfalse⽂本是否可选
    decodeBooleanfalse是否解码

    代码:

    <text selectable="{{false}}" decode="{{false}}">&nbsp;&lt;
    </text>
    

    7.3 image

    1. 图⽚标签,image组件默认宽度320px、⾼度240px
    2. ⽀持懒加载
    属性名类型默认值说明
    srcString图⽚资源地址
    modeString“scaleToFill”图⽚裁剪、缩放的模式
    lazy-loadBooleanfalse图⽚懒加载

    mode 有效值:
    mode 有 13 种模式,其中 4 种是缩放模式,9 种是裁剪模式。

    模式说明
    缩放scaleToFill不保持纵横⽐缩放图⽚,使图⽚的宽⾼完全拉伸⾄填满 image 元素
    缩放aspectFit保持纵横⽐缩放图⽚,使图⽚的⻓边能完全显⽰出来。
    缩放aspectFill保持纵横⽐缩放图⽚,只保证图⽚的短边能完全显⽰出来
    缩放widthFix宽度不变,⾼度⾃动变化,保持原图宽⾼⽐不变
    裁剪top不缩放图⽚,只显⽰图⽚的顶部区域
    裁剪bottom不缩放图⽚,只显⽰图⽚的底部区域
    裁剪center不缩放图⽚,只显⽰图⽚的中间区域
    裁剪left不缩放图⽚,只显⽰图⽚的左边区域
    裁剪right不缩放图⽚,只显⽰图⽚的右边区域
    裁剪top left不缩放图⽚,只显⽰图⽚的左上边区域
    裁剪top right不缩放图⽚,只显⽰图⽚的右上边区域
    裁剪bottom left不缩放图⽚,只显⽰图⽚的左下边区域
    裁剪bottom right不缩放图⽚,只显⽰图⽚的右下边区域

    7.4 Swiper轮播图

    swiper标签:滑块视图容器
    swiper-item标签:滑块,默认宽度和⾼度都是100%

    属性名类型默认值说明
    indicator-dotsBooleanfalse是否显⽰⾯板指⽰点
    indicator-colorColorrgba(0, 0, 0, .3)指⽰点颜⾊
    indicator-active-colorColor#000000当前选中的指⽰点颜⾊
    autoplayBooleanfalse是否⾃动切换
    intervalNumber5000⾃动切换时间间隔
    circularBooleanfalses是否循环轮播

    示例代码:

    <swiper autoplay="true" interval="2000" circular="true" indicator-dots="true" indicator-color="#0094ff" indicator-active-color="##ff0094">
      <swiper-item>
        <image src="//gw.alicdn.com/imgextra/i3/121/O1CN01d4N6Pw1ClSXpSiESc_!!121-0-lubanu.jpg"/>
      </swiper-item>
      <swiper-item>
        <image src="//gw.alicdn.com/imgextra/i1/198/O1CN01snMZj51DKj2eIkiDC_!!198-0-lubanu.jpg"/>
      </swiper-item>
      <swiper-item>
        <image src="https://img.alicdn.com/tps/i4/https://img.alicdn.com/tps/i4//TB1cZkvTeH2gK0jSZJnSuuT1FXa.jpg"/>
      </swiper-item>
    </swiper>
    
    swiper {
      width: 100%;
      height: calc(100vw*352/1125);
      /* height: 31.28vw; */
    }
    image {
      width: 100%;
    }
    

    7.5 navigator导航栏

    • 导航组件,类似超链接标签
    • 块级元素,默认会换行,可直接加宽度和高度
    属性名类型默认值说明
    targetStringself在哪个⽬标上发⽣跳转,默认当前⼩程序,可选值self/miniProgram
    urlString当前⼩程序内的跳转链接
    open-typeStringnavigate跳转⽅式

    open-type属性有效值:

    说明
    navigate保留当前⻚⾯,跳转到应⽤内的某个⻚⾯,但是不能跳到tabbar ⻚⾯
    redirect关闭当前⻚⾯,跳转到应⽤内的某个⻚⾯,但是不允许跳转到 tabbar ⻚⾯
    switchTab跳转到 tabBar ⻚⾯,并关闭其他所有⾮ tabBar ⻚⾯
    reLaunch关闭所有⻚⾯,打开到应⽤内的某个⻚⾯
    navigateBack关闭当前⻚⾯,返回上⼀⻚⾯或多级⻚⾯。可通过 getCurrentPages() 获取当前的⻚⾯栈,决定需要返回⼏层
    exit退出⼩程序,target='miniProgram’时⽣效

    代码示例:

    <text>pages/search/search.wxml</text>
    <navigator url="/pages/logs/logs">日志页面</navigator>
    <navigator url="/pages/index/index">跳转tabbar页面</navigator>
    <navigator open-type="redirect" url="/pages/logs/logs">日志页面 redirect</navigator>
    <navigator open-type="switchTab" url="/pages/index/index">switchTab 跳转到tabbar页面</navigator>
    <navigator open-type="reLaunch" url="/pages/img/img">reLaunch 可以随便跳</navigator>
    

    7.6 rich-text

    富文本标签:可以将字符串解析成对应标签,类似 vue中 v-html 功能

    代码示例:

    <!-- 显示斜体hello world -->
    <rich-text nodes="<i> hello world </i>"></rich-text>
    

    nodes属性
    nodes 属性⽀持 字符串 和 标签节点数组

    属性说明类型必填备注
    name标签名string⽀持部分受信任的 HTML 节点
    attrs属性object⽀持部分受信任的属性,遵循 Pascal 命名法
    children⼦节点列表array结构和 nodes ⼀致

    ⽂本节点:type = text

    属性说明类型必填备注
    text⽂本string⽀持entities
    • nodes 不推荐使⽤ String 类型,性能会有所下降。
    • rich-text 组件内屏蔽所有节点的事件。
    • attrs 属性不⽀持 id ,⽀持 class 。
    • name 属性⼤⼩写不敏感。
    • 如果使⽤了不受信任的 HTML 节点,该节点及其所有⼦节点将会被移除。
    • img 标签仅⽀持⽹络图⽚

    7.7 button

    属性类型必填说明
    sizestring默认值default,mini小尺寸按钮的⼤⼩
    typestringdefault白色,primary绿色 ,warn红色按钮的样式类型
    plainbooleanfalse按钮是否镂空,背景⾊透明
    disabledbooleanfalse是否禁⽤
    loadingbooleanfalse名称前是否带 loading 图标
    form-typestringsubmit提交表单,reset重置表单⽤于 组件,点击分别会触发 组件的submit/reset 事件
    open-typestring微信开放能⼒

    open-type 的合法值

    说明
    contact打开客服会话,如果⽤⼾在会话中点击消息卡⽚后返回⼩程序,可以从bindcontact 回调中获得具体信息,具体说明
    share触发⽤⼾转发,不能转发到朋友圈,具体说明
    getPhoneNumber获取⽤⼾⼿机号,可以从bindgetphonenumber回调中获取到⽤⼾信息,但加密过,需要在后台服务器进行解析,具体说明
    getUserInfo获取⽤⼾信息,可以从bindgetuserinfo回调中获取到⽤⼾信息,直接获取,不存在加密字段
    launchApp打开APP,可以通过app-parameter属性设定向APP传的参数具体说明
    openSetting打开授权设置⻚
    feedback打开“意⻅反馈”⻚⾯,⽤⼾可提交反馈内容并上传⽇志,开发者可以登录⼩程序管理后台后进⼊左侧菜单“客服反馈”⻚⾯获取到反馈,只能通过真机调试打开

    open-type 的 contact的实现流程

    1. 将⼩程序 的 appid 由测试号改为 ⾃⼰的 appid
    2. 登录微信⼩程序官⽹,添加
      客服 - 微信
    3. 为了⽅便演⽰,⽼师⾃⼰准备了两个账号(一)普通⽤⼾ A(二)客服-微信 B

    代码示例:

    <!-- search.wxml -->
    <button type="warn" size="mini" loading="true" plain="true">
      default
    </button>
    <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取用户手机号</button>
    
    // pages/search/search.js
    Page({
      getPhoneNumber(e) {
        console.log(e);
      }
    })
    

    7.8 icon

    属性类型默认值必填说明
    typestringicon的类型,有效值:success, success_no_circle,info, warn, waiting, cancel, download, search,clear
    sizenumber/string23icon的⼤⼩
    colorstringicon的颜⾊,同css的color

    代码示例:

    <!-- search.wxml -->
    <view class="group">
      <block wx:for="{{iconSize}}">
        <icon type="success" size="{{item}}"/>
      </block>
    </view>
     
    <view class="group">
      <block wx:for="{{iconType}}">
        <icon type="{{item}}" size="40"/>
      </block>
    </view>
     
    <view class="group">
      <block wx:for="{{iconColor}}">
        <icon type="success" size="40" color="{{item}}"/>
      </block>
    </view>
    
    // pages/search/search.js
    Page({
      data: {
       iconSize: [20, 30, 40, 50, 60, 70],
       iconType: [
         'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 
    'download', 'search', 'clear'
       ],
       iconColor: [
         'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
       ],
      }
    })
    

    7.9 radio

    • 可以通过 color属性来修改颜色
    • 需要搭配 radio-group ⼀起使⽤

    代码示例:

    <radio-group bindchange="handleChange">
      <radio color="red" value="male"></radio>
      <radio color="red" value="female"></radio>
    </radio-group>
    <view>单选框选中的是{{gender}}</view>
    
    Page({
      data() {
        gender: ''
      },
      handleChange(e) {
        console.log(e);
        let gender = e.detail.value
        this.setData({
          // gender:gender
          gender
        })
      }
    })
    

    7.10 checkbox

    • 可以通过 color属性来修改颜色
    • 需要搭配 checkbox-group ⼀起使⽤
    <checkbox-group bindchange="handleItemChange">
      <checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">{{item.name}}</checkbox>
    </checkbox-group>
    <view>选中的水果有{{checkedList}}</view>
    
    Page({
      data: {
        list:[
          {id:0,name:"苹果",value:"apple"},
          {id:1,name:"葡萄",value:"grape"},
          {id:2,name:"香蕉",value:"banana"},
        ],
        checkedList: ''
      },
      handleItemChange(e) {
        console.log(e);
        const checkedList = e.detail.value
        this.setData({
          checkedList
        })
      }
    })
    

    八、自定义组件

    类似vue或者react中的自定义组件

    8.1 创建自定义组件

    创建文件夹components文件夹之后,在创建一个组件的文件夹,然后右击tabs文件夹创建components组件就会生成如下代码结构:
    在这里插入图片描述
    例如要引用到某个页面中,代码如下:

    {
      "usingComponents": {
        "tabs": "../../components/tabs/Tabs"
      }
    }
    
    <tabs></tabs>
    

    8.2 组件构造器(Tabs.js)

    Component 构造器可⽤于定义组件,调⽤ Component 构造器时可以指定组件的属性、数据、⽅法等。

    定义段类型是否必填描述
    propertiesObject、Map组件的对外属性,是属性名到属性设置的映射表,参⻅下⽂
    dataObject组件的内部数据,和 properties ⼀同⽤于组件的模板渲染
    observersObject组件数据字段监听器,⽤于监听 properties 和 data 的变化,参⻅ 数据监听器
    methodsObject组件的⽅法,包括事件响应函数和任意的⾃定义⽅法,关于事件响应函数的使⽤,参⻅ 组件事件
    createdFunction组件⽣命周期函数,在组件实例刚刚被创建时执⾏,注意此时不能调⽤ setData ,参⻅ 组件⽣命周期
    attachedFunction组件⽣命周期函数,在组件实例进⼊⻚⾯节点树时执⾏,参⻅ 组件⽣命周期
    readyFunction组件⽣命周期函数,在组件布局完成后执⾏,参⻅ 组件⽣命周期
    movedFunction组件⽣命周期函数,在组件实例被移动到节点树另⼀个位置时执⾏,参⻅ 组件⽣命周期
    detachedFunction组件⽣命周期函数,在组件实例被从⻚⾯节点树移除时执⾏,参⻅ 组件⽣命周期

    8.3 组件、自定义组件传参

    子组件

    <!--components/Tabs/Tabs.wxml-->
    <text>components/Tabs/Tabs.wxml</text>
    
     <view class="tabs">
      <view class="tabs_title">
        <view class="title_item {{item.isActive ? 'active':''}}" wx:for="{{tabs}}" wx:key="id"
              bindtap="handleItemTab" data-index="{{index}}">
          {{item.name}}
        </view>
      </view>
      
      <view class="tabs_content">
        <slot></slot>
      </view>
     </view>
    
    // components/Tabs/Tabs.js
    Component({
      properties: {
        tabs: {
          type: Array,
          value: []
        }
      },
    
    //   1页面.js文件中存放事件回调函数的时候存放在data同层级下!
    //   2组件.js文件中存放事件回调函数的时候必须要存在在methods中!
      methods:{
        handleItemTab(e) {
          // 1绑定点击事件 需要在methods中绑定
          // 2获取被点击的索引,通过事件传参
          // 3获取原数组
          // 4对数组循环
          //      1给每一个循环性选中属性改为false
          //      2给当前的索引的项添加激活选中效果就可以了
          // console.log(e);
          const {index} = e.currentTarget.dataset //es6 语法解构赋值,严谨写法,先复制一份数据,保持原有数据不变
          // 5触发父组件的自定义事件,同时将子组件数据传递给父组件
          this.triggerEvent('itemChange',{index})
        }
      }
    })
    
    /* components/Tabs/Tabs.wxss */
    .tabs {
    
    }
    .tabs_title{
      display: flex;
      padding: 10rpx 0;
    }
    .title_item{
      flex: 1;
      /* justify-content: center; */
      /* display: flex; */
      /* align-items: center; */
      text-align: center;
    }
    .active{
      color: red;
      border-bottom: 5rpx solid currentColor;
    }
    .tabs_content{
      margin-top: 100rpx;
    }
    

    父组件

    <!-- 这里子向父传递数据,通过事件方式,在子组件的标签加bind+事件名称="",别忘了加bind -->
    <tabs tabs="{{tabs}}" binditemChange="handleItemChange1">
      <block wx:if="{{tabs[0].isActive}}">首页</block>
      <block wx:elif="{{tabs[1].isActive}}">原创</block>
      <block wx:elif="{{tabs[2].isActive}}">分类</block>
      <block wx:else>关于</block>
    </tabs>
    
    // pages/mine/mine.js
    Page({
      data: {
        tabs: [
          {id:0, name:"首页", isActive:true},
          {id:1, name:"原创", isActive:false},
          {id:2, name:"分类", isActive:false},
          {id:3, name:"关于", isActive:false},
        ]
      },
      handleItemChange1(e) {
        // console.log(e);
        const {index} = e.detail
        let {tabs} =this.data
        // [].forEach遍历数组遍历数组的时候修改了v,也会导致源数组被修改
        tabs.forEach((v,i) => i===index?v.isActive=true:v.isActive=false);
    
        this.setData({
          tabs
        })
      }
    })
    

    实现的需求:

    在这里插入图片描述

    九、小程序生命周期

    9.1 应用生命周期

    //app.js
    App({
      // 1 应用第一次启动的就会触发的事件
      onLaunch() {
      // 在应用第一次启动的时候获取用户的个人信息
        console.log("onLaunch")
        // js的方式来跳转
        // wx.navigateTo({
        //   url: '/11/22/33'
        // })
      },
      // 2 应用被用户看到
      onShow(){
      //对应用的数据或者页面效果重置
        console.log ("onShow")
      },
      // 3 应用被隐藏了
      onHide(){
      //暂停或者清除定时器
        console.log("Hide");
      },
      // 4 应用的代码发生了报错的时候就会触发
      onError(err){
        //在应用发生代码报错的时候,收集用户的错误信息,通过异步请求将错误的信息发送后台去
        console.log("onError")
        console.log (err)
      },
        // 5 页面找不到就会触发
        // 应用第一 次启动的时候,如果找不到第一个入口页面 才会触发
      onPageNotFound(){
        //如果页面不存在了通过js的方式来重新跳转页面重新跳到第二个首页
        //不能跳到tabbar页面导航组件类似
        wx.navigateTo({ 
          url: '/pages/logs/logs'
        });
        console.log('onPageNotFound');
      },
    })
    

    9.2 页面生命周期

    // pages/search/search.js
    Page({
      data: {
       iconSize: [20, 30, 40, 50, 60, 70]
      },
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        // onLoad发送异步请求来初始化页面数据
        console.log("onLoad"); 
      },
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
        console.log('onReady');
      },
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
        console.log('onShow');
      },
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
        console.log('onHide');
      },
      /**
       * 生命周期函数--监听页面卸载,也可以通过点击超链接来演示
       */
      onUnload: function () {
        console.log('onUnload');
      },
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
        console.log("onPullDownRefresh");
        // 页面的数据或者效果重新刷新
      },
      /**
       * 页面上拉触底事件的处理函数,需要让页面出现上下滚动才行
       */
      onReachBottom: function () {
        // 上拉加载下一页数据
        console.log('onReachBottom');
      },
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
        console.log('onShareAppMessage');
      },
      /**
      * 页面滚动就可以触发
      */
      onPageScroll(){
        console.log('onPageScroll');
      },
      /**
      * 页面的尺寸发生改变的时候触发
      * 小程序发生了横屏竖屏切换的时候触发,需要在search.json界面添加如下代码
      * {
      "pageOrientation": "auto"
    }
      */
      onResize() {
        console.log('onResize');
      },
      /** 
       * 1 必须要求当前页面也是tabbar页面
       * 2 点击的自己的tab item的时候才触发 
      */
      onTabItemTap() {
        console.log('onTabItemTap');
      }
    })
    

    9.3 页面生命周期图解

    在这里插入图片描述

    展开全文
  • 前面一篇介绍了微信小程序目录结构、基本配置。这里再来介绍一下函数定义、页面渲染。 小程序逻辑app.js:定义App函数用来注册一个小程序,包含全局数据和函数,指定小程序的生命周期回调等。整个小程序只有一个 ...
  • 详细的微信小程序学习笔记(从入门到项目)(1)

    万次阅读 多人点赞 2018-09-21 20:44:58
    微信小程序(1) 准备工作 1 获取 AppID(小程序ID) 登录微信公众平台,新建一个邮箱,避免旧有的邮箱有注册过公众号等.无法获取. 进行小程序的注册. 选择个人, 然后填写信息.进行登录之后, 在首页, 设置中. 然后点击...

    微信小程序(1)

    准备工作

    获取 AppID(小程序ID)

    登录微信公众平台,新建一个邮箱,避免旧有的邮箱有注册过公众号等.无法获取. 进行小程序的注册. 选择个人, 然后填写信息.进行登录之后, 在首页, 设置中. 然后点击开发设置 进行获取 AppID(小程序ID)
    在这里插入图片描述

    下载安装开发工具

    开发工具下载地址:

    https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
    

    创建一个自己的微信小程序

    完成上面之后,我们就拥有了一个 appID 与工具.

    点击打开,工具 根据下面的信息进行填写,记的保证自己的版本的更新
    在这里插入图片描述

    了解工具的日常使用与文件构成

    切换开发模式

    当我们工作中在开发小程序的同时也在开发微信公众号 , 则必须进行切换开发者模式, 在顶部微信开发者工具中_–> 有更换开发者模式–>公众号网页调试

    新增和修改编译模式

    当我们需要修改 初始化时 显示的页面时, 则需要进行更改启动页面. 我们可以通过在 app.json 中的 pages 中 切换路径的顺序进行 切换(不推荐). 或者通过 在编译模式下 新增一个编译模式. 进行 切换.
    在这里插入图片描述
    预览和真机调试

    预览调试:开发者可以通过手机扫描预览提供的二维码来访问小程序

    真机调试:和预览一样会提供访问的二维码,不同的是真机调试模式会弹出控制台,可以查看手机模式下的调试信息

    清除缓存

    有选项的删除 缓存信息 清除本地的授权记录、sessionStorage和localStorage等缓存数据 . 
    

    右上角详情

    则可以查看自己依赖的库是什么版本, 版本过低可能会影响使用
    
    注意版本库的选择,不要轻易去修改这个配置,很容易导致项目的api不兼容
    

    小程序的文件结构介绍

    基本的结构

    - pages // 包含了所有页面
    	- index // 页面文件夹
    		- index.js    // 页面的脚本逻辑文件
    		- index.wxml  // 页面模板文件
    		- index.wxss  // 页面样式文件
    		- index.json  // 页面配置文件 --->(重要)
    		-如果有其他页面, 会在此生成
    - utils // 普通的工具函数 -->(不需要注意)
    - app.js   // 项目启动入口
    - app.json // 全局的配置  --->(重要)
    - app.wxss // 全局样式
    - project.config.json // 项目的配置文件
    

    和web的页面结构比较:

    文件  	小程序  	web         
    模板  	.wxml	.html       
    样式  	.wxss	.css        
    脚本  	.js  	.js/script标签
    
    注意:微信小程序页面目录下,.js 和  .wxml 文件是必需的
    

    项目的json文件配置

    参考文档的地址

    在这里插入图片描述

    pages配置

    pages 数组中的页面路径地址必须存在pages文件夹中

    pages 数组中的页面路径地址下标为0,也就是第一个路径在普通编译模式下会作为启动页面,但不建议使用更换顺序的方式修改启动页, 可以通过新增或修改编译模式更改启动页

    window配置示例

    // app.json
    {
      "window":{
        "navigationBarBackgroundColor": "#fff", // 导航栏背景颜色 
        "navigationBarTextStyle": "black",      // 导航栏标题颜色,仅支持 black / white
        "navigationBarTitleText": "weChart",    // 导航栏标题文字内容
        "backgroundColor": "#fff",				// 窗口的背景色
        "backgroundTextStyle": "light",			// 下拉 loading 的样式,仅支持 dark / light
        "enablePullDownRefresh": true			// 设置允许下拉刷新
      }
    }
    
    注意: window的配置
    1. navigationBarTextStyle导航栏标题颜色,仅支持 black / white
    2. backgroundTextStyle下拉 loading 的样式,仅支持 dark / light
    

    tab Bar 配置示例

    // app.json
    {
      "tabBar": {
      	"color": "#000",					// tab 上的文字默认颜色
      	"selectedColor": "#000",			// tab 上的文字选中时的颜色
      	"backgroundColor": "#f5f5f5",		// tab 的背景色
        "list": [{
          "pagePath": "pages/index/index",	// 页面路径,必须在 pages 中先定义(必填)
          "text": "首页",					// tab 上按钮文字(必填)
          "iconPath": "",					// tab 上的图片路径,不支持网络图片
          "selectedIconPath": ""			// 选中时的图片路径
        }, {
          "pagePath": "pages/logs/logs",
          "text": "日志",
          "iconPath": "",					
          "selectedIconPath": ""		
        }]
      }
    }
    
    注意:配置了tabBar后,底部栏只对配置的页面可见, 而且tabBar的设置至少两个,最多5个
    

    WXML 模板文件和组件

    新建页面

    1 通过app.json来新建 2 编辑器手动创建

    wxml和html的不同点

    1. 标签名字不一样,如html里常用的标签 div、a、span等,在小程序里标签是view、navigator、text等,除了常用的元素块标签,小程序还提供了地图,视频,音频等组件
    2. 可以通过表达式{{ }}渲染状态数据

    组件(不称为标签称为组件)

    组件文档

    组件共同属性类型

    所有组件都有的属性:
    
    属性名           	类型          	描述     	注解                  
     id            	String      	组件的唯一标示	保持整个页面唯一            
    class         	String      	组件的样式类 	在对应的 WXSS 中定义的样式类   
    style         	String      	组件的内联样式	可以动态设置的内联样式         
     hidden        	Boolean     	组件是否显示 	所有组件默认显示            
     data-*        	Any (任意属性)  	自定义属性  	组件上触发的事件时,会发送给事件处理函数
    bind* / catch*	EventHandler	组件的事件  	详见事件                
    

    组件的介绍

    view (块级容器相当于 div)
    
    <view class="container">
    	<!-- 页面内容 -->
    </view>
    
    text (相当于 sapn) 
    

    注意: span中可以放置div 虽然不推荐, 但是 text 只能 放置其 自己

    1. 基础库版本低于 2.1.0 时, text 组件内嵌的 style 设置可能不会生效
    2. text组件内只支持 text 嵌套
    3. 除了文本节点以外的其他节点都无法长按选中

    navigator

    注意: 
    0  navigator是不能跳转至 外部链接的
    
    1  wep 中的a标签使用的是href 但是 微信小程序的组件 中的 则是 url 
    
    2 注意点是, 需要使用 绝对路径  ( / )  在url前加 / 
    
    3 当你的 tabBar中 有使用 了哪个 页面的路径 需要跳转的话 必须添加 
    
    	open-type :' switchTab '   不然不会起作用
    
    	open-type 常用的有效值
    
    		redirect 		  覆盖当前页面
    
    		switchTab	  跳转到tabBar页
    
    		navigateBack  关闭当前页面,返回上一页面 ( 设置这个值的话, 当你单击这个链接时会关闭当前的页面, 跳转回上一页面  但是 跳转的页面两个都有 在tabBar 就不能返回的)
    
     <navigator url="/pages/demo/domo">
     
        		跳转到demo
    </navigator>
    

    image图片组件

    image的基本使用

    <image 
    	style="width: 200px; height: 200px;
    	mode="aspectFill" 
    	src="图片地址">
    </image>
    
    注意:image组件默认宽度300px、高度240px 注2:image组件中二维码/小程序码图片不支持长按识别
    

    常用的mode 有效值

    • scaleToFill 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
      aspectFit 保持纵横比缩放图片,使图片的长边能完全显示出来
      aspectFill 保持纵横比缩放图片,只保证图片的短边能完全显示出来
    注意:微信朋友圈和QQ的说说页的图片裁剪方式,可以通过设置 `mode=aspectFill` 实现类似功能
    

    form表单组件

    form组件包含了以下常用的子组件

    •    input 	输入框组件
         label 	表单字段说明组件
         checkbox 	多项选择器组件
         radio  	单项选择器组件
         button 	按钮组件
      
        上述表单的子组件除了button都有name属性,给表单提供字段名的映射
      

    input输入框组件

    input的简单使用

    <input placeholder="请输入文字" type="text"/>
    

    input常用的属性

      属性         	类型     	默认值   	说明       
      value      	String 	      	输入框的初始内容 
     type       	String 	"text"	input 的类型
     password   	Boolean	false 	是否是密码类型  
     placeholder	String 	      	输入框为空时占位符
     disabled   	Boolean	false 	是否禁用     
    

    input type 有效值

    值     	说明               
    text  	文本输入键盘           
    number	数字输入键盘 (手机号码)    
    idcard	身份证输入键盘          
    digit 	带小数点的数字键盘(输入金额常用)
    

    checkbox多选项和radio单选项的使用

    当两个存在多个可选项时候需要使用checkbox-group或者radio-group
    进行包裹-----> 不包裹的话会出现问题(比如单选框可以选中多个)
    文档中有许多属性–> 更改颜色 选中状态等

    checkbox组件文档

    radio组件文档

    button 按钮组件

    button常用的属性

     属性       	类型     	默认值    	说明                                      
    size     	String 	default	按钮的大小 ( mini)                           
    type     	String 	default	按钮的样式类型  (  primary绿色   warn 红色)        
    disabled 	Boolean	false  	是否禁用                                    
    loading  	Boolean	false  	名称前是否带 loading 图标                       
    form-type	String 	       	用于form组件,可选值 submit/reset,触发form的提交和reset事件
    

    form表单组件

    form表单基本提交案例

    第一步,设置button form-type='submit

    第二步,通过bindsubmit设置form的提交事件处理函数

    // wxml
    <form bindsubmit="formSubmit">
    	<input type="text" name="username" placeholder></input>
    	<button form-type="submit">提交</button>
    </form>
    
    
    // js 中 配置 函数
    formSubmit: function(e){
        console.log(e.detail.value)
      }
    

    wxss样式

    WXSS 对 CSS 进行了扩充以及修改,与 CSS 相比,WXSS 扩展的特性有:

    • 尺寸单位

    • 样式导入

    • 选择器

      rpx 尺寸单位

        rpx可以使元素根据屏幕宽度进行自适应,小程序规定屏幕的宽度为750rpx, 也就是 100% = 750rpx; 50% = (750 / 2)rpx
      

    其他自适应方法

    	web中使用rem,vw, 百分比
    

    使用方法

    在开发小程序是建议使用750像素宽度的设计稿,这样设计稿的元素宽度是多少像素就直接设置为多少rpx
    
    注意1rpx在某些屏幕上可能无效
    

    样式导入

    导入方法,参考weui-wxss提供的例子:

    // 地址:https://github.com/Tencent/weui-wxss/blob/master/dist/app.wxss
    @import 'style/weui.wxss';
    
    展开全文
  • app.json 注册页面,配置小程序 app.wxss 全局样式文件 pages存放页面文件 每个页面一个文件夹,下面.wxml和.js文件是必需的。 .wxss和.josn文件不是必需的,如果没有的话就用全局的app.wxss和app.json 如果有的话就...
  • 小程序的基本目录结构如图(1)所示:  (此图片来源于网络,如有侵权,请联系删除! ) 图(1)   pages pages目录下,每个文件夹代表了一个页面的所有配置,一般情况下每个文件夹下都有四个文件,并且每个文件名都必须...
  • 微信小程序已经推出了,相继的教程也有。官方网页推出API和接口说明,目前来讲暂时足够。  可以进入该链接查看。微信官网 今天尝试一下下载该web的开发工具,从目前来讲,使用了一个下午。目前版本给人的感觉还...
  • 一:tabBar坑 tabBar 是一个数组,只能配置最少2个、最多5个 tab。 tabBar页面只要设置的内容与pages路由中定义的页面才会被显示 (此图片来源于网络,如有侵权,请联系删除! ) 二:实现crypto&base64加密 关键字:...
  • 微信小程序思维导图

    2018-10-31 09:06:06
    整理分享,微信小程序开发思维导图(组件及API)xmind文档
  • 微信小程序学习笔记一、环境准备二、工具介绍三、小程序结构目录1、app.json => 全局配置2、页面配置3、sitemap 页面是否被微信索引四、模板语法1、WXML数据绑定2、数组循环,列表渲染3、block标签4、条件渲染5、...

    参考文档:微信小程序开发文档

    一、环境准备

    看文档即可,没有遇到什么值得记录的。

    二、工具介绍

    普通编译(默认显示首页,每次修改以后自动刷新会回到首页)
    添加编译模式(优先显示添加的页,开发的时候,在开发哪个页面,就显示哪个页面)
    预览(二维码方式让手机可以查看页面)
    详情按钮(这里可以修改APPID)
    调试基础库(版本)
    在这里插入图片描述

    版本管理(git版本)
    不校验合法域名(开发时候选择)

    三、小程序结构目录

    小程序框架名:MINA
    配置文件:

    1、app.json => 全局配置

    字段:
    (1)pages => 页面路径
    在这里直接写一个路径,会直接在文件夹中创建文件,非常省心
    写在最前面的就是默认页面
    小技巧:
    vscode编辑器开发的时候,修改了并不会直接调起小程序的更新,需要再去开发者工具打个空格或者啥,激活一下微信开发者工具里面编辑器的保存,保存后会直接调起更新。
    (2)window => 顶部条之类的配置
    小技巧:
    这部分在微信开发者工具里面写比较好,因为会有代码提示,比较方便
    (3)tabBar => 菜单导航条
    小技巧:
    list数组(最少2项)
    并且textcolor与list评级(也就是说,菜单导航item的样式设置代码,与list数组是平级的)

    2、页面配置

    页面名.json 里的配置会覆盖掉app.json的配置,起到个性化配置的作用。

    3、sitemap 页面是否被微信索引

    四、模板语法

    1、WXML数据绑定

    被绑定的引号中的值不可以加空格
    可以绑定运算表达式

    2、数组循环,列表渲染

    小技巧:
    在绑定 key值的时候,*this,表示是普通数组,非对象数组

    3、block标签

    会在渲染的时候消失,在不想额外增加标签的时候用这个

    4、条件渲染

    小技巧
    elif => else if 注意这个就可以
    wx:hidden hidden 属性不可以跟 display属性一起用(比方给hidden属性所在的元素加display:flex),会引起样式冲突

    5、事件绑定

    bindtap bindinput 等
    注意事项:
    (1)小程序修改值与vue不同,不能直接 this.XX 或者 this.data.XX,小程序需要 this.setData({“XX”:value})
    (2)小程序事件传参不能直接传递,会变成字符串被识别成为方法名,需要通过自定义属性来传参,获取和设置data值

    6、wxss

    750rpx
    善用calc属性
    小技巧:
    引入less(@import 只支持相对路径引入)
    vscode装插件,因为小程序本身不支持less,只能在vscode里面把写的less文件用插件转换成为wxss
    不支持*通配符选择器

    五、常见标签

    1、text

    只能嵌套自己,只有它能实现长按复制,需要配置

    2、image

    (1)因为小程序代码打包不能超过2M,所以图片都建议放到服务器上来引用(土豆图床可以上传图片生成链接地址)
    (2)默认大小 320*240
    (3)自带 lazy-load 上下三屏的才加载

    3、swipper

    注意事项:
    宽高需要计算,不能用图片撑开
    计算方式:假如宽度是750rpx,750rpx/swipper高度 = 图片宽度 / 图片高度

    4、navigator

    a标签(块级的)
    target 跳当前小程序还是其他小程序

    5、rich-text 富文本标签

    接收标签字符串 和 对象数组,一般前者比较常用

    6、button

    自带很多微信的功能(打开客服、意见反馈这俩需要真机才可以模拟)
    顺便手机投屏功能研究一下

    7、自定义组件

    开发者工具编辑器右键新建 可以快速 生成新的 组件文件夹
    组件方法在 methods 页面方法是直接跟 data 平级 新增方法即可,不用methods

    其他

    修改数组的时候,最好深拷贝一份,进行修改,再把修改的值 setData 给到 data的变量。

    展开全文
  • 微信小程序学习笔记(一)

    千次阅读 2017-03-19 21:29:31
    关于微信小程序 如何看待小程序 小程序性能 特点 缺点 小程序前景 快速上手 注册开发账号 开发工具 创建第一小程序 进行debug END关于微信小程序如何看待小程序可以看做微信的一个附加功能吧,就是在微信里面启动...
  • 微信小程序破解教程微信小程序只对少部分开放公测名额,大部分人都是没有权限,所以想要体验微信小程序开发还是需要破解一下的,破解方法比较简单,GitHub上早已有了破解教程...注意事项 在安装开发工具0.9版本时,它...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 23,577
精华内容 9,430
关键字:

微信小程序学习笔记

微信小程序 订阅