微信小程序 学习笔记

时间  2020-07-26 标签 微信 程序 学习 笔记

一、pagesjavascript

　　主要存放小程序的页面文件，其中每一个文件夹为一个页面，每一个页面包含四个文件，html

　　（1）.wxml文件是界面文件；vue

　　（2）.js是事件交互文件，用于处理界面的点击事件等功能；java

　　（3）.wxss为界面美化文件，让界面显示的更加美观；json

　　（4）.json为配置文件，用于修改导航栏显示样式等小程序

　　注意：数组

　　　　（1）小程序每一个页面必须有.wxml和.js文件，其余两种类型的文件能够不须要微信

　　　　（2）文件名称必须与页面的文件夹名称相同，如index文件夹，文件只能是index.wxml、index.wxss、index.js和index.json.网络

二、utils微信开发

　　该文件件主要用于存放全局的一些.js文件，公共用到的一些事件处理代码文件能够放到该文件夹下，用于全局调用。

　　对于容许外部调用的方法，须要用module.exports声明，才能在其余js文件中使用

module.exports = {  
  util: util
}  


其余文件引入：
var util = require('../../utils/util.js')

三、app.js

　　app.js : 系统的方法处理文件，主要处理程序的声明周期的一些方法；例如：程序刚开始运行时事件处理等

　　App()：函数用来注册一个小程序，接受一个object参数，其指定小程序的生命周期函数等

　　

　　    前台、后台定义： 

　　　　　　当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并无直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。须要注意的是：只有当小程序进入后台必定时间，或者系统资源占用太高，才会被真正的销毁。

　　　onPageNotFound（基础库 1.9.90 开始支持，低版本需作兼容处理）

　　　getApp()： 

　　　　注意：

  • App() 必须在 app.js 中注册，且不能注册多个。
  • 不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就能够拿到 app 实例。
  • 不要在 onLaunch 的时候调用 getCurrentPages()，此时 page 尚未生成。
  • 经过 getApp() 获取实例以后，不要私自调用生命周期函数。

四、app.json

　　app.json : 系统全局配置文件，设置导航头的颜色，字体大小，下面有没有tabbar等功能，具体页面的配置在页面的json文件中单独修改；

　　

　　（1）pages:用于设置页面的路径，接受数组，每一项都是字符串，每一项是路径加文件名，可是不须要写文件后缀，由于框架会自动去寻找路径

　　（2）window: 用于设置小程序的状态栏、导航栏、标题、窗口背景色

　　　　navigationBarBackgroundColor（#000000）、navigationBarTextStyle(仅支持 black/white)、navigationBarTitleText(导航栏标题文字内容)、navigationStyle(导航栏样式，仅支持 default/custom。custom 模式可自定义导航栏，只保留右上角胶囊状的按钮)、backgroundColor(串口的背景色)、backgroundTextStyle(下拉 loading 的样式，仅支持 dark/light)、backgroundColorTop（#ffffff,顶部窗口的背景色，仅 iOS 支持）、backgroundColorBottom（#ffffff,底部窗口的背景色，仅 iOS 支持）、enablePullDownRefresh（false/true,是否开启下拉刷新）、onReachBottomDistance（50，页面上拉触底事件触发时距页面底部距离，单位为px）

　　　　注：navigationStyle 只在 app.json 中生效。

　　　　　　开启 custom 后，低版本客户端须要作好兼容。开发者工具基础库版本切到 1.7.0（不表明最低版本，只供调试用） 可方便切到旧视觉

　　（3）tabBar

　　　　  

　　　　

　　　　注意：　　　

　　　　　　<1> 当设置 position 为 top 时，将不会显示 icon

　　　　　　<2>tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

　　　（4）networkTimeout:能够设置各类网络请求的超时时间。

　　　　　　

　　　　（5）debug

　　　　　　能够在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有Page的注册，页面路由，数据更新，事件触发\

　　　　（6）单独页面上的.json文件

　　　（6）golbalData：全局的数据　　　

五、app.wxss

　　app.wxss : 全局的界面美化代码

六、逻辑层

　　小程序的逻辑层有javascript编写，逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈

七、Page() 函数用来注册一个页面，接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等

　　

　　（1）初始化数据： 

　　页面上<view>{{text}}</view>

page({
   data: {
         text: 'my text'
    }
})

　　（2）事件处理函数（bindtap）

　　<view bindtap="viewTap"> click me </view>

Page({
  viewTap: function() {
    console.log('view tap')
  }
})

　　（3）获取当前页面的路径

　　　　Page.prototype.route

　　（4）将数据从逻辑层发送到视图层（异步），同事改变对应的this.data的值

　　　　Page.prototype.setData()

　　　　　

注意：

  1. 直接修改 this.data 而不调用 this.setData 是没法改变页面的状态的，还会形成数据不一致。
  2. 单次设置的数据不能超过1024kB，请尽可能避免一次设置过多的数据。
  3. 请不要把 data 中任何一项的 value 设为 undefined ，不然这一项将不被设置并可能遗留一些潜在问题。

　　（5）getCurrentPages()

 　　　　函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。

　　　　注意： 不要尝试修改页面栈，会致使路由以及页面状态错误

八、视图层

　　（1）数据绑定：和vue同样

　　（2）列表渲染： wx:for="{{array}}"

　　（3）条件渲染：

　　　　　　　　　wx:if="{{view == 'WEBVIEW'}}"  

　　　　　　　　　　wx:elif="{{view == 'APP'}}"
　　　　　　　　　　wx:else="{{view == 'MINA'}}"

　　（4）模板： 

　　　　

　　（5）事件：bindtap

九、WXS：小程序的一套脚本语言，结合WXML能够构建出页面的结构

<wxs module="m1">
var msg = "hello world";

module.exports.message = msg;
</wxs>

<view> {{m1.message}} </view>

　　在微信开发者工具里面，右键能够直接建立 .wxs 文件，在其中直接编写 WXS 脚本。　

在.wxs模块中引用其余 wxs 文件模块，可使用 require 函数。

引用的时候，要注意以下几点：

  • 只能引用 .wxs 文件模块，且必须使用相对路径。
  • wxs 模块均为单例，wxs 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，屡次引用，使用的都是同一个 wxs 模块对象。
  • 若是一个 wxs 模块在定义以后，一直没有被引用，则该模块不会被解析与运行。

module 属性值的命名必须符合下面两个规则：

  • 首字符必须是：字母（a-zA-Z），下划线（_）
  • 剩余字符能够是：字母（a-zA-Z），下划线（_）， 数字（0-9）

　　src 属性能够用来引用其余的 wxs 文件模块。

 

十、WXSS：样式

　　（1）尺寸单位： rpx,规定屏幕的宽为750rpx

　　（2）内联样式：<view style="color:{{color}};" />

十一、自定义组件（要小程序基础库版本 1.6.3开始才有，否则没有效果）

　　自定义组件依旧有json wxml wxss js这4个文件组成，要自定义一个组件

　　（1）json文件声明　　

{
  "component": true
}

　　（2）wxml中定义　

<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">
  {{innerText}}
</view>
<slot></slot>

　　（3）js文件　

Component({
  properties: {
    // 这里定义了innerText属性，属性值能够在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function(){}
  }
})

　　（4）使用已注册的自定义组件前，首先要在页面的 json 文件中进行引用声明。　

{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}

　　（5）页面时使用　　　

<view>
  <!-- 如下是对一个自定义组件的引用 -->
  <component-tag-name inner-text="Some text"></component-tag-name>
</view>

　　（6）样式　　

　　　　（1）注意：组件对应的wxss样式，不能使用id选择器、后代选择器（.a .b{}）、子元素选择器（.a > .b）、属性选择器

　　　　（2）外部样式类（从小程序基础库版本 1.9.90 开始支持）

　　　　　　 

 

　　

转载于:https://www.cnblogs.com/qzccl/p/8968728.html

联系我们 沪ICP备2021010478号-7