小程序的基础心得

保湿是所有护肤程序的基础 #生活知识# #生活小知识# #化妆技巧与美容# #面部保养知识#

page

page是小程序的主体内容部分。小程序的页面全部都放在page文件夹下。

utils

utils中的utils.js是写好了的时间js。你可以在其他页面中调用，你就可以获取当前的时间。

例子：

js中：

var util = require('utils.js的路径');

Page({

data: {

},

onLoad: function () {

//调用函数时，传入new Date()参数，返回值是日期和时间

var time = util.formatTime(new Date());

//再通过setData更改Page()里面的data，动态更新页面的数据

this.setData({

time: time

});

}

})

wxml中：

<view>{{time}}</view>

app.js

app.js是用来保存全局变量的一个地方

app.json

app.json中的pages是用来保存所有页面的路径。这样你就可以不用像在html中还要去引用css和js。小程序自动地帮你引用好了。但是有一点是要注意的：pages中的路径不用写后缀名。比如："pages/index/index"。

app.json中的window是用来设置顶部导航栏的样式的。

例子：

"window":{

"backgroundTextStyle":"light",

"navigationBarBackgroundColor": "#333d9c",

"navigationBarTitleText": "天宁区互联网12315平台",

"navigationBarTextStyle":"white"

}

但是如果你想要改变某个页面的导航栏的名称，直接在那个页面中的json在写："navigationBarTitleText" :  "个人中心"

app.json中的tabBar是用来设置底部tab栏

例子：

"tabBar":{

"color": "#816c5b",

"backgroundColor": "#fff",

"selectedColor": "#38429f",

"list":[

{

"pagePath":"pages/index/index",

"text":"首页",

"iconPath":"/image/home02.png",

"selectedIconPath":"/image/home.png"

},

{

"pagePath":"pages/newPersonalCenter/newPersonalCenter",

"text":"个人中心",

"iconPath":"/image/member.png",

"selectedIconPath": "/image/member02.png"

}

]

}

app.wxss

app.wxss是保存全局的样式。你直接在页面中用class就可以了。

project.config.json

project.config.json是用来保存项目的配置文件的。在普通编译中你可以选择添加编译模式，添加你想要直接看到的页面，这个时候project.config.json就会发生变化。

小程序的图片

小程序的图片需要你在外部进行添加，就是要在image文件夹中添加。值得注意的是小程序中，如果你想用背景图，你的背景图的属性写在wxcss中是无效的。你可以选择写在wxml中，比如：在wxmlz中的style写：background-image:url("背景图片的路径")；background-report:no-report;background-size:100%;

小程序wx:if wx:for

wx:if

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

<view wx:if="{{condition}}"> True </view>

也可以用 wx:elif 和 wx:else 来添加一个 else 块：

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

<view wx:elif="{{length > 2}}"> 2 </view>

<view wx:else> 3 </view>

三目

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

wx:for

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

<view wx:for="{{array}}">

{{index}}: {{item.message}}

</view>

Page({

data: {

array: [{

message: 'foo',

}, {

message: 'bar'

}]

}

})

使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名：

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

{{idx}}: {{itemName.message}}

</view>

wx:for="{{downList}}" wx:key="" data-index="{{index}}" bindtap="downListTab"

下标： e.currentTarget.dataset.index

小程序的事件

小程序中的事件分为冒泡事件和非冒泡事件：

冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。

非冒泡事件：当一个组件上的事件被触发后，改事件不会向父节点传递。

wxml的冒泡事件有很多种，详细的见小程序开发文档。但用的最多的是tap，tap是手指触摸后马上离开。

事件绑定：

bind：bind事件绑定不会阻止冒泡事件向上冒泡

catch：catch事件绑定可以阻止冒泡事件向上冒泡

小程序的页面跳转

小程序的页面跳转最常用到的是：

1、wx.navigateTo 这个是父级页面跳转到子级页面，可以返回上级页面

2、wx.redirectTo 这个是平级跳转，不可以返回上级页面

3、wx.switchTab 这个是跳转到tabBar页面、

4、wx.navigateBack 这个是从子级页面跳转到父级页面

小程序的轮播

小程序的轮播很简单，就是用小程序中的swiper组件。

例子：

wxml：

<swiper class='swiperContent' indicator-dots="true" autoplay="true" circular="true" indicator-color="rgba(0, 0, 0, 0.45)" indicator-active-color="#28A1EA" interval="3000" duration="500">

<swiper-item bindtap='videoTap' wx:for="{{swiperImgContent}}" wx:key="swiperImg">

<image src='{{item.swiperImg}}' class='swiperImg'></image>

</swiper-item>

</swiper>

js：

onLoad: function(options){

var swiperImgContent=[

{ swiperImg: "/image/swiper01.jpg"},

{ swiperImg: "/image/swiper01.jpg"},

{ swiperImg: "/image/swiper01.jpg"}

]

this.setData({

swiperImgContent : swiperImgContent

});

}

template

template只是一个占位符，在页面响应的时候，template就会消失。template上不能加事件函数
在要引用的wxml中写：
<import src="template的wxml的路径"/>
<template is="template的name" data="{{item}}"/>(data是用来做数据传递的)
比如：
<block wx:for="postList">
  <template is="template的name" data="item"/>（如果这里写...item那template里的数据绑定就不要写item.了）
</block>
在要引用的wxss中写：
@import "template的wxss的路径";
！！！js在template中是无效的

自定义属性

自定义属性必须以data开头然后用“-”来连接单词。“-”可以是多个
data-自定义单词="{{}}"
data-自定义单词-自定义单词2="{{}}"

命名要驼峰命名

​

<view class='scenicBox' wx:for="{{scenicArr}}" data-scrollName="{{item.name}}" bindtap='scenicTap'>

<image class='scenicIcon' src='{{item.icon}}'></image>

<text class='scenicTitle'>{{item.name}}</text>

</view>

​

JS调用：

var scrollName = e.currentTarget.dataset.scrollname;

驼峰命名在js调用的时候第二的单词首字母小写

全局变量

在app.js中定义全局变量

globalData：{

    userInfo：null

}

var app=getApp();     // 取得全局App

app.globalData.userInfo = res.data.data.uid     // 取得全局变量需要的值

userId: getApp().globalData.userInfo   // 获取全局变量并赋值给userId

传值

url传值父级页面到子级页面

onPostTap: function(e){
   var postId = e.currentTarget.dataset.postid;(currentTarget:当前鼠标去点击的组件。对应到这个事例就是view。dataset:所有自定义属性的集合。postid:i要用小写，大写是没有用的，自动转化成小写)
   wx.navigateTo({
      url:"post-detail/post-detail?id="+postId    
   })

传多个参数：

wx.navigateTo({

url: 'scroll/lishui/lishui?cityId=' + cityId + '&code=' + code,

})

接收
onLoad:function(option){
    var postId = option.id;
}

缓存(子级页面到父级页面)

子级页面

wx.setStorageSync('缓存的名称'，需要缓存的数据)

父级页面

var 缓存的名称 = wx.getStorageSync('缓存的名称')

this.setData({

   父级页面数据名称 ： 缓存的名称

})

全局的app对象

例子:

app.js

App({

appData:{

// 账户信息

account: ''

}

})

保存数据的页面的js

var app = getApp();

Page({

  data:{

 userName: ' '

}

input中获取数据：

userNameInput: function(e) {

this.setData({

userName: e.detail.value

});

},

一个点击触发的事件函数中

var userName = this.data.userName;

// 保存用户名

app.appData.account = {

userName: userName

}

})

调用数据页面的js

var app = getApp();

Page({

data:{

userName: ' '

}

onShow: function(){

this.setData({

userName: app.appData.account.userName

})

}

})

调用数据的wxml

<view>{{userName}}</view>

小程序中的登录注册页面和个人中心页面的切换

在app.js中：

appData:{

 userinfo: ' '

}

在个人中心js中：

onLoad:function(options){

if(app.appData.userinfo ===' '){

wx.redirectTo({

url:'登录注册页面的路径'

})

}else{

this,setData({

把注册的数据传过来

})

}

}

小程序定时器

小程序定时器是经常用到的，这边就单独的拎出来说一下

js：

countDown: function () {
    let that = this;
    let second = that.data.second;
    that.setData({
      timer: setInterval(function () {
        second--;
        that.setData({
          second: second
        })
        if (second === 0) {
          clearInterval(that.data.timer);
          that.setData({
            waitfinish: true,
            finish: false
          })
        }
      }, 1000)
    })
  },
 onShow: function () {
    this.countDown();
  }

second是你在要用到的读秒，second先在data中声明一下。

网址：小程序的基础心得 https://www.yuejiaxmz.com/news/view/415901

相关内容

【微信小程序】基础篇
小程序设计基本微信小程序的校园生活助手系统
基于微信小程序的中国各地美食推荐平台小程序
C 语言程序设计心得：编程之路的探索与收获
基于微信小程序的智能社区服务小程序，附源码
基于微信小程序的时间管理小程序
程序员是做什么的 零基础入门到精通，收藏这篇就够了
基础化妆教程
推荐一款小程序：HowToCookOnMiniprogram——程序员的美食秘籍！
心理学基础

随便看看