前言

更好的阅读体验请:我的微信小程序入门踩坑之旅

小程序出来也有一段日子了,刚出来时也留意了一下。不过赶上生病,加上公司里也有别的事,主要是自己犯懒,就一直没做。这星期一,赶紧趁着这股热乎劲,也不是很忙,终于磨磨唧唧的写了个小demo,(当然还有好多接口没有使用)。

预计阅读时间:5min

正文

介绍

小程序的框架,挺像Vue的。

wxml

<view> Hello {{name}}! </view>
<button bindtap="changeName"> Click me! </button>

  

js部分

// This is our App Service.
// This is our data.
var helloData = {
name: 'WeChat'
} // Register a Page.
Page({
data: helloData,
changeName: function(e) {
// sent data change to view
this.setData({
name: 'MINA'
})
}
})

  

开发者通过框架将逻辑层数据中的 name 与视图层的 name 进行了绑定,所以在页面一打开的时候会显示 Hello WeChat!

当点击按钮的时候,视图层会发送 changeName 的事件给逻辑层,逻辑层找到对应的事件处理函数
逻辑层执行了 setData 的操作,将 name 从 WeChat 变为 MINA,因为该数据和视图层已经绑定了,从而视图层会自动改变为 Hello MINA!

工具: 微信 web 开发者工具
我一般在这里只预览效果用。

app.json

app.json文件来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

改变pages里配置,会更改启动程序时的主页面。
window是设置页面的窗口表现,包括状态栏,导航栏颜色 等等。
tarbar是底部tab栏的表现。
官方还有 networkTimeout和 debug选项,在这里没有配置。
networkTimeout可以设置各种网络请求的超时时间。

{
"pages": [
"pages/index/other",
"pages/other/index",
"pages/logs/logs",
"pages/login/login",
"pages/douban/douban",
"pages/douban/user",
"pages/other/comment"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#3CB371",
"navigationBarTitleText": "Ed Glayxe",
"navigationBarTextStyle": "light",
"backgroundColor": "#3CB371"
},
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "我的",
"iconPath": "images/tabList/my_a.png",
"selectedIconPath": "images/tabList/my_b.png"
}, {
"pagePath": "pages/logs/logs",
"text": "日志",
"iconPath": "images/tabList/log_a.png",
"selectedIconPath": "images/tabList/log_b.png"
}, {
"pagePath": "pages/other/other",
"text": "段子",
"iconPath": "images/tabList/joke_a.png",
"selectedIconPath": "images/tabList/joke_b.png"
}, {
"pagePath": "pages/login/login",
"text": "登录",
"iconPath": "images/tabList/Login_a.png",
"selectedIconPath": "images/tabList/Login_b.png"
}, {
"pagePath": "pages/douban/douban",
"text": "用户列表",
"iconPath": "images/tabList/user_a.png",
"selectedIconPath": "images/tabList/user_b.png"
}]
}
}

  

页面文件

app.js、app.json、app.wxss这三个文件是必不可少的文件。.js后缀的是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件。微信小程序会读取这些文件,并生成小程序实例。这些都是公共文件。
在我的wxss里引入了weui的wxss 有的页面使用了它的UI。

Pages 里面是对应的页面。每个对应的页面里都有 相应的js wxml wxss文件。对文件进行配置。

在common文件夹了 写了一个评论template 尝试了一下引入模板。
在utils里封装了一下内部的方法。

问题

在小程序里支持flex布局,还是挺不错的。
我有时布局的时候都给写个html文件,在浏览器里看看样式。然后照搬到微信小程序里。但是我写的页面并不复杂。并不能完全的发现更多的不同。
在小程序里试图层为view ,但它并不像div一样,view 和text在一起会重叠。我觉得相当于 div和span。
还有一些CSS样式并不支持。

数据渲染:

这个用flex布局写的,页面比较简单。

我记得昨天有个东西我找了好久,就是
“enablePullDownRefresh”: true。允许用户下拉。
一开始我以为这是自己写的。这是配置在json文件里。官方的文件几乎没怎么看。。然后就尴尬了。

var util = require("../../utils/util.js");
var app = getApp(); Page({
data: {
textDataList: [],
tempid: 0,
lastid: 0
},
onLoad: function() {
util.alertLoading('数据加载中', 2000);
this.loadData();
},
refreshData: function() {
util.alertLoading('刷新中', 2000);
this.loadData(); },
loadData: function() {
var that = this;
var url = 'http://api.budejie.com/api/api_open.php';
var requireData = { a: 'list', c: 'data', type: '29' };
util.request(url, requireData, function(res) {
var newData = res.data;
that.setData({
textDataList: newData.list,
tempid: newData.list[0].id
})
console.log(that.data.tempid); })
},
onReachBottom: function() {
util.alertLoading("加载中!", 2000);
console.log("加载这个没做 = =!");
},
onPullDownRefresh: function() {
util.alertLoading("刷新中!", 1000);
var that = this;
var url = 'http://api.budejie.com/api/api_open.php';
var requireData = { a: 'list', c: 'data', type: '29' };
util.request(url, requireData, function(res) {
var newData = res.data;
that.setData({
textDataList: newData.list,
lastid: newData.list[0].id
})
console.log(that.data.lastid);
});
if (this.data.lastid === this.data.tempid) {
util.alertSuccess("已经是最新了", 1000);
}
}
})

  

后续微信小程序思维导图(来源于网络)

快下班了,其实写之前我想写的更详细一点,但更多的介绍我想没有比官方更清楚的。

我觉得最好的学习方式就是撸一遍代码,比看10个demo有用的多。

时间仓促,页面很简单。也希望把你的demo分享给我互相学习。感谢你的阅读,

Bye。

项目地址: https://github.com/miloers/WxSmall

 

我的微信小程序入门踩坑之旅的更多相关文章

  1. 微信小程序开发踩坑之旅

    项目之始: 一.搭建新项目时出现了 page[pages/XXX/XXX] not found.May be caused by :1. Forgot to add page route in app ...

  2. 微信小程序开发踩坑日记

    2017.12.29  踩坑记录 引用图片名称不要使用中文,尽量使用中文命名,IDE中图片显示无异样,手机上图片可能出现不显示的情况. 2018.1.5  踩坑记录 微信小程序设置元素满屏,横向直接w ...

  3. 微信小程序开发踩坑记

    前言 微信小程序自去年公测以来,我司也申请了一个帐号开发,春节前后开始开发,现在终于告一个段落了.谨以此文记录下踩过的坑. 坑1:scroll-view与onPullDownRefresh冲突 由于有 ...

  4. mpvue微信小程序项目踩坑记录

    1.mpvue入门教程, http://mpvue.com/mpvue/quickstart.html # . 先检查下 Node.js 是否安装成功 $ node -v v8.9.0 $ npm - ...

  5. 微信小程序开发踩坑与总结 -

    原文链接:https://segmentfault.com/a/1190000008516296 前段时间把公司小程序项目开发完成了,所以来写写自己开发过程中碰到的问题和解决方法,以及用到的提高效率的 ...

  6. 微信小程序开发-踩坑

    异步请求处理 详情描述: 微信小程序的wx.request({})请求时异步处理,以下代码 wx.reuest({ url:"https://XXXA", method:" ...

  7. 微信小程序t填坑之旅一(接入)

    一.小程序简介 小程序是什么? 首先"程序"这两个字我们不陌生.看看你手机上的各个软件,那就是程序.平时的程序是直接跑在我们原生的操作系统上面的.小程序是间接跑在原生系统上的.因为 ...

  8. [转]微信小程序开发踩坑记录

    本文转自:http://www.cnblogs.com/NKnife/p/6283605.html 1.由于小程序wx.request()方法是异步的,在app.js执行ajax后,各分页加载app. ...

  9. 微信小程序开发踩坑记录

    1.由于小程序wx.request()方法是异步的,在app.js执行ajax后,各分页加载app.js的全局数据时,无法按顺序加载.例: //app.js App({ ajax:function() ...

随机推荐

  1. python 单例模式

    单例模式,也叫单子模式,是一种常用的软件设计模式.在应用这个模式时,单例对象的类必须保证只有一个实例存在 用装饰器方式实现单例模式 #!/usr/bin/python # coding=utf-8 d ...

  2. Hive : UDFArgumentTypeException Exactly one argument is expected.

    Hive执行时Failed.. 分段执行发现排除一些聚合函数或者内置函数后可以正常执行.. 因为Hive-Sql语句比较长..有很多的case when then 排除后发现是聚合函数的用法问题.. ...

  3. jQuey知识点三 解析json数据

    1.解析简单数据 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="vie ...

  4. javascript语言理解

    1.使用jquery remove,无法remove自身标签; 使用标签

  5. php获取用户 地区 、ip地址

    header("Content-type: text/html; charset=utf-8"); function getCity($ip = '')//获取地区 { if($i ...

  6. linux Mint wine安装qq,桌面快捷键配置

    在桌面新建qq.desktop文件,添加以下内容 #!/usr/bin/env xdg-open[Desktop Entry]Comment=QQTerminal=falseName=QQExec=w ...

  7. Python全栈【异常处理】

    Python全栈[异常处理] 本节内容: 1.异常处理 2.什么时候用异常处理 异常处理 1.异常处理: 异常就是程序运行时发生错误的信号,异常处理是在编程过程中为了增加友好性,在程序出现bug时一般 ...

  8. cd命令

    [cd]           切换目录     cd===>change directory 命令功能 : 切换目录到dirname 命令实例: 实例1:切换到跟目录下 命令: cd / 输出: ...

  9. Atom安装以及activate-power-mode atom package插件安装

    1.首先安装node.js,不然没有npm命令可用. 现在很多开源程序都使用npm来管理依赖包,所以node.js必备呀. 2.去下载atom安装包和activate-power-mode-0.5.2 ...

  10. iOS UIAlertController跟AlertView用法一样 && otherButtonTitles:(nullable NSString *)otherButtonTitles, ... 写法

    今天写弹出框UIAlertController,用alertView习惯了,所以封装了一下,跟alertView用法一样,不说了,直接上代码: 先来了解一下otherButtonTitles:(nul ...