小程序模板网

廖马儿:IOS程序员学微信小程序开发系列《三》:经验及知识点 ... ...

2018-03-29 箔经绳

一、入门

1.app.js

app.js 是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用 MINA提供的丰富的 API,如本例的同步存储及同步读取本地数据。

2.app.json
app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口 背景色,配置导航条样式,配置默认标题。注意该文件不可添加任何注释。


eg:
{
    "pages":[
    "pages/index/index",
    "pages/logs/logs"
    ]
}

// 注意:pages/index/index 最后的index,就包含了index.js index.wxml index.wxss三个文件

3.index.js
index.js 是页面的脚本文件,在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例,声明并处理数据,响应页面交互事件等。

4..wxss
页面的样式表是非必要的。当有页面样式表时,页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表,也可以在页面的结构文件中直接使用 app.wxss中指定的样式规则

  1. .json
    页面的配置文件是非必要的。当有页面的配置文件时,配置项在该页面会覆盖 app.json 的 window中相同的配置项。如果没有指定的页面配置文件,则在该页面直接使用 app.json 中的默认配置。

6..wxml

布局文件


<!-- logs.wxml -->
<view class="container log-list">
</view>

二、生命周期:

在index.js里面:

生命周期是:App Launch -> App Show -> onload -> onShow -> onReady

1)整个app的启动与现实。app的启动在app.js中可配置。
2)进入各个页面的加载显示等。(这里,loading的指示器显示等)。
3)界面跳转:
a)wx.navigateTo(OBJECT):保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。
b)wx.redirectTo(OBJECT):关闭当前页面,跳转到应用内的某个页面。
c)wx.nacigateBack():当前页面关闭,回退到前一页面。

三、八大组件

这里可以参考官方文档,比较全面。

四、外部框架

原生的js插件和外部框架都不能使用,因为他们几乎都是操作DOM的内容,而微信应用号不允许操作任何DOM。动态设置的rem.js也不能支持。

五、WebSocket

微信提供WebSocket让我们可以做即时聊天,十分方便。

六、tabBar

*注意:微信的底部菜单最多支持五栏(五个 icons)
tabBar的text属性可以去掉,而且没有text属性的时候,tabBar高度会降低。

七、知识点

1)*注意:wechat开发工具并不完善,每次编辑了哪个页面,必须ctrl + s:保存一下.

2)F5是刷新页面,可以刷新测试的demo界面

*注意:修改wxml和wxss下的内容后,直接 F5 刷新就能直接看到效果,修改js则需点击重启按钮才能看到效果。

3)建议在subline或者webStorm下开发微信小程序

4)基于微信开发工具并不人性化目前,建议在新建页面的时候,首先在app.json的pages中先添加:"pages/index/index",再新建一个wxml文件的同时,把对应的js和wxss文件一起新建好,因为微信应用号的配置特点就是解析到一个wxml文件时,会同时在同级目录下找到同文件名的js和wxss文件.

5)相对于html的

,在小程序中使用

 

6)使用class名来设置样式,id名在这里基本没有什么用处。原因是主要操作数据,不操作dom。

7)wxss文件是引入的样式文件,可以直接在里面写样式,但是不推荐

eg:

	
eg:
     @import "wxss/index.css";
      body{
            background:pink;  
      }

8)app.json中 window是配置顶部的一些样式
tabBar 是配置底部的配置

9)window作用:

用于设置小程序的状态栏,导航栏,标题,窗口背景色。// 窗口指的是页面的back

*注:在app.json中配置的属性会被子window的属性所覆盖。
属性有:
"navigationBarBackgroundColor":"#666666"
"navigationBarTextStyle":"white" // 注意:这里仅支持white/black/light
"navigationBarTitleText":"微信demo" // 导航栏标题文字
"bacgroundColor":"#333333" // 窗口的背景色
"backgroundTextStyle":"dark" // 下拉背景字体,loading图的杨啊是,仅仅支持 dark/light
"enablePullDownRefresh":"false" // 是否开启下拉刷新

10).js文件主要作用逻辑,和生命周期函数处理

11)小程序中的导入:

a).js => require
b).wxss => import

12)在css中display属性作用

eg:


	
{
      display:none; // 不显示
      display:block;  // 此元素将显示为块级元素,此元素前后会带有换行符
      display:inline;  // 默认。此元素会被显示为内联元素,元素前后没有换行符。
      display:inline-block;   // 行内块元素
       ....... // 参考 [display解释](http://www.w3school.com.cn/cssref/pr_class_display.asp)
}

在微信小程序中:


	
`display:flex;`  //   参考:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html  作用是  `flex `是` flexiable box` 用于移动布局。 为盒状模型提供了最大的灵活性。任何一个容器都能够制定为Flex布局。

webkit内核的浏览器:safari是一个

*注意:设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

13)rpx单位介绍:
微信小程序中的css尺寸单位,rpx可以根据屏幕宽度进行自适应。规定的屏幕宽度为750rpx.
参考: http://www.51xuediannao.com/javascript/xiaochengxu_rpx.html

14) indicator-dots = "{{indicatorDots}}" 为何用{{}}包裹


	
<swiper class="swiper_box" indicator-dots="{{indicatorDots}}" vertical="{{vertical}}">

解释:绑定的数据。也可以说是一种MVVM的模板语法。VUE AN基本都是这么干的。语法格式。应该是框架加进去的自定义属性,{}看框架咋定义,有些事function,有些是参数。标签里面遇到像data,ng-model, indicator-dots这样的属性,一般都是框架加进去的。

15)Page()函数用来注册一个页面。接受一个object参数。其指定页面的初始数据,生命周期函数,时间处理函数等。

Page()相当于一个构造函数。


	
Page({
    data:{
          indicatorDots:true,
          vertical:false,
          autoplay:true,
          interval:3000
    },

    // 时间处理函数
    swiperchange:function(e){
         // contents
    }
})

16) js中 var that = this; 的解释

this对象在程序中随时会改变,而var that=this之后,that没改变之前仍然是指向当时的this,这样就不会出现找不到原来的对象

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

前台、后台定义: 当用户点击左上角关闭,或者按了设备 Home 键离开微信,小程序并没有直接销毁,而是进入了后台;当再次进入微信或再次打开小程序,又会从后台进入前台。

只有当小程序进入后台一定时间,或者系统资源占用过高,才会被真正的销毁。

App.prototype.getCurrentPage()
getCurrentPage()函数用户获取当前页面的实例。

var app = getApp(); 微信提供了全局的 getApp() 函数,可以获取到小程序实例。

不要在定义于 App()内的函数中调用 getApp() ,使用 this就可以拿到 app 实例。

不要在onLaunch的时候调用 getCurrentPage(),此时 page 还没有生成。

通过 getApp() 获取实例之后,不要私自调用生命周期函数。

实用经验,自己出错过的

  1. bindtap 不能写为:bindTap
    给view绑定事件的时候

2.Page中的2个方法中, 需要用,隔开:

Page({
  onLoad: function () {
    console.log('onLoad-search')

  },

  // 返回前一页
  navigateBack: function(e) {
    console.log("back");
  }

})

3.设置都是 :, 不是=:

// 清除
clearText: function(e) {

    this.setData({
      input_str:""   // 之前是=就会报错
    })
  },

4.
display:none 与 display:block 相对应后者会显示

5.主要原则:

不是改变父元素,是改变item对应的数据变量。

6.事件:

Page({
  bindViewTap:function(event){
    event.target.dataset.alphaBeta === 1 // - 会转为驼峰写法
    event.target.dataset.alphabeta === 2 // 大写会转为小写
  }
})
  1. 微信小程序判断
    wx-if="{{index==0}}"

8.当前target
console.log(e.currentTarget);

9.表达式

{{}} 里面不能嵌套 {} 或者 {{}} , 里面自然会使用变量

{{ dic-index }} // 如果index 变量为1. 结果就为dic-1



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/22955.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询