前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >翻炒吧蛋滚饭:微信小程序初步入门知识梳理、收集

翻炒吧蛋滚饭:微信小程序初步入门知识梳理、收集

作者头像
极乐君
发布2018-02-05 17:22:13
8360
发布2018-02-05 17:22:13
举报
文章被收录于专栏:极乐技术社区极乐技术社区

小程序Demo

tabBar

  • 文件:app.json
  • 代码:

"tabBar": { "color": "#666", "selectedColor": "#268dcd", "boardStyle" : "white", "backgroundColor": "#fafafa", "list": [{ "pagePath": "pages/douban/coming_soon/coming_soon", "iconPath": "image/coming", "selectedIconPath": "image/coming-active", "text": "即将上映" }, { "pagePath": "pages/douban/in_theathers/in_theathers", "iconPath": "image/ing", "selectedIconPath": "image/ing-active", "text": "正在热映" } ] }

  • 使用注意: list中的pagePath,需要在app.json中添加后才能生效。

"pages":[ "pages/douban/coming_soon/coming_soon", "pages/douban/in_theathers/in_theathers" ],Window

  • 配置位置:app.json
  • 用于设置小程序的状态栏、导航条、标题、窗口背景色。 数据绑定 page中的data为页面的初始数据,初始化数据将作为页面的第一次渲染。data 将会以 JSON 的形式由逻辑层传至渲染层,所以其数据必须是可以转成 JSON 的格式:字符串,数字,布尔值,对象,数组。 渲染层可以通过WXML对数据进行绑定。格式:{{变量名}},为Mustache语法。

// wxml文件中<view>{{text}}</view>// js文件中Page({ data:{ text: 'hello world' }})

以上页面的view标签内便会显示hello world条件渲染

  • wx:if 在框架中,我们用 wx:if="{{condition}}",来判断是否需要渲染该代码块。
  • block 因为 wx:if 是一个控制属性,需要将它添加到一个标签上。但是如果我们想一次性判断多个组件标签,我们可以使用一个 <block/> 标签将多个组件包装起来,并在上边使用 wx:if 控制属性。 setData setData函数用于将数据从逻辑层发送到视图层,同时改变对应的 this.data 的值。 注意: 直接修改 this.data 无效,无法改变页面的状态,还会造成数据不一致。 单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据

Page({ data:{ text: 'hello world' textText: "asdasd" }, viewTap:function() { this.setData({ text: 'world Hello' }) }})

调用viewTap的时候,则可以刷新页面上引用该值的区域,同时给text赋值。

绑定点击事件

js中自定义点击函数

viewTap:function() { console.log("点击了view")}

wxml中绑定点击事件

<text bindtap="viewTap">点我</text>

JS中的打印

  • 直接打印:

console.log("Hello World")

  • 格式化打印:使用%来定义拼接类型,与c语言一致

var people = "Alex"

  • 拼接:

var name = "Bob";

  • 打印对象:

var people = {

模块化

我们可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块。模块只有通过 module.exports或者 exports才能对外暴露接口。 例:

module.exports = {

调用:

var functions = require('../functions.js')

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2016-11-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 极乐技术社区 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • tabBar
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档