今天看了几个小时的微信小程序说说心得体会

小程序是个前端框架

根据微信相关提供了很多接口

1 先说说各种后缀的文件

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

2 JSON 配置

app.json 和 project.config.json,此外在 pages/logs 目录下还有一个 logs.json

项目比较重要的JSON文件

app.json 是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等.

page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。

project.config.json通常大家在使用一个工具的时候,都会针对各自喜好做一些个性化配置,例如界面颜色、编译配置等等,当你换了另外一台电脑重新安装工具的时候,你还要重新配置

3  数据绑定

WXML 是这么写 :

<text>{{msg}}</text>

JS 只需要管理状态即可:

this.setData({msg: 'Hello World'})

通过 {{ }} 的语法把一个变量绑定到界面上,我们称为数据绑定

4 模板

WXML 模板

从事过网页编程的人知道,网页编程采用的是 HTML + CSS + JS 这样的组合,其中 HTML 是用来描述当前这个页面的结构,CSS 用来描述页面的样子,JS 通常是用来处理这个页面和用户的交互。

同样道理,在小程序中也有同样的角色,其中 WXML 充当的就是类似 HTML 的角色。打开 pages/index/index.wxml,你会看到以下的内容:

<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}">获取头像昵称</button>
<block wx:else>
<image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>

模板中有专门的模板使用语法

今天看了几个小时的微信小程序说说心得体会的更多相关文章

  1. 微信小程序开发心得

    微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司 ...

  2. 微信小程序开发心得--动画机制

    微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受.首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司认 ...

  3. 微信小程序个人心得

    尊重原创:http://blog.csdn.net/qq_28832135/article/details/52796048 昨天看了一下微信小程序官方文档,总结一下自己学习的个人心得. 首先从官方文 ...

  4. 微信小程序学习心得

    我们写小程序时都要跳转页面的,也会有底部导航来进行切换 这个时候就要介绍下窗口是怎样配置的 要在app.json文件里写一个tabBer对象 里面在定义一个list数组里面放我们定义的几个需要切换的页 ...

  5. 手把手教你制作微信小程序,开源、免费、快速搞定

    最近做了个"罗孚传车"的小程序 一时兴起,做了一个小程序,将个人收集的同汽车相关的行业资讯和学习资料,分享到小程序中,既作为历史资料保存,又提供给更多的人学习和了解,还能装一下:) ...

  6. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

  7. 原创:经验分享:微信小程序外包接单常见问题及流程

    从九月底内测到现在已经三个半月.凌晨一点睡觉已经习以为常,也正是这样,才让无前端经验的我做微信小程序开发并不感到费劲.最近才开始接微信小程序的外包项目,目前已经签下了五份合同,成品出了两个.加上转给朋 ...

  8. 微信小程序:原生热布局终将改变世界

    关于本文的所有观点都是网上收集,与作者本人没有任何关系! 最近朋友圈已经被微信小程序刷屏了,这也难怪,腾讯的产品拥有广泛的影响力,谁便推出个东西,都会有很多人认为会改变世界,这不,张小龙刚一发布微信小 ...

  9. 初试微信小程序

    2016年11月3日,微信小程序终于公测了,大家可以正式开发了.早在这之前,应公司要求,和同事就早早的试了一下微信小程序的开发,特此记录一下: 微信官方小程序文档:https://mp.weixin. ...

随机推荐

  1. 【转】RAID 技术发展综述

    原文地址:https://blog.csdn.net/liuaigui/article/details/4581970   摘要 :现代企业信息化水平不断提高,数据已经取代计算成为了信息计算的中心.这 ...

  2. char与char的区别

    char与varchar的区别 : char (13)长度固定, 如'www.qq.net' 存储需要空间 12个字符: varchar(13) 可变长 如'www.qq.net' 需要存储空间 9字 ...

  3. SQL Server--------SQL Server问题错误解决

    1.错误提示: 修改字段属性时,提示: 消息 5074,级别 16,状态 1,第 1 行对象'DF__dms_deliv__sync___51BAE991' 依赖于 列'sync_ff_result_ ...

  4. 事件对象的属性,基于jQuery(jquery针对不同浏览器进行了兼容性的封装)

    1. event.type(该方法是获取到事件的类型) $( 'a' ).click( function( event ){ alert( event.type ); //click return f ...

  5. iframe子页面控制父页面滚动高度,直接蹦到父页面开头

    zepto调用父页面窗口元素的scrollTop()方法会报错,貌似是scrollTop函数中有个scrollTo()方法用到this,指向错误. 经检查, 原生js控制父页面滚动,只能写数字,不能带 ...

  6. Bitmap每个像素值由指定的掩码决定

    bBitmap每个像素值由指定的掩码决定 写了一个小工具来转换Bitmap彩色图片的不同位数. 程序的逻辑是拼接: Bitmap文件头 + Bitmap信息头 + Bitmap数据 在RGB888转换 ...

  7. 剑指Offer 37. 数字在排序数组中出现的次数 (数组)

    题目描述 统计一个数字在排序数组中出现的次数. 题目地址 https://www.nowcoder.com/practice/70610bf967994b22bb1c26f9ae901fa2?tpId ...

  8. linux下查询java进程以及杀掉其进程

    1.使用命令: ps -ef|grep java 查询到到自己想要kill掉的进程id 2.使用命令: kill -9 id(这里的id为你上一步查找到的id)

  9. 从npm 角度理解 mvn 的 pom.xml

    从npm 角度理解 mvn 的 pom.xml pom -- project object model. 用于描述项目的配置: 基础说明 依赖 如何构建运行 类似 node.js 的 package. ...

  10. 推荐一些关于学习Html Css和Js的书吗?

    前端易学易懂,随着移动互联网的日益兴起,it行业对于前端的需求也在不断的提高,那么从前端小白修炼成为前端大神的这个过程之中,一些必备的枕边书也是必不可少的. 第一本,入门<Head first ...