已经用微信开发者工具做完了基础页面，正在思索如何搭建后台。^_为了理清思路边写博客边思考。

前端开发

小程序的框架

页面设置

在app.json里写这个小程序的所有页面，写在第一个的编译时默认第一个展示。

tabBar

在app.json里写tabBar导航栏，写完之后效果如下

通过pagePath绑定要导向的页面，iconPath设置图标

主页代码

wxml

在home.wxml里写主页的代码
wxml类似xml这种标签语言
xml本身是一种格式规范，是一种包含了数据以及数据说明的文本格式规范。
xml数据格式如下

<person age="too young" experience="too simple" result="sometimes naive" />

或是

<person><age value="too young" /><experience value="too simple" /><result value="sometimes naive" />
</person>

json格式是这样

{"age":"too young","experience":"too simple","result":"sometimes naive"
}

wxml官方介绍
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/

wxml组件官方介绍
https://developers.weixin.qq.com/miniprogram/dev/component/

数据绑定
在.wxml中：

<!--wxml-->
<view> {{message}} </view>

在js文件的data属性中加上代表的数据：

data{name："Wechat"}

列表渲染
利用wx：for 实现对数组进行循环展示
wx:for-item指定数组当前元素的变量名
wx:for-index制定数组当前元素的下标 0，1

在.wxml中

<view wx:for"{{array}}"><text>{{item.name}}</text>
</view>

在.js文件中设置data数据，定义一个array数组：

data:{array:[{name:"wechat",age:18},{name:"windows",age:22}]},

或是这么使用：

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>

// page.js
Page({data: {array: [1, 2, 3, 4, 5]}
})

条件渲染

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>

// page.js
Page({data: {view: 'MINA'}
})

引入
在引入使用src属性定义路径注意路径格式： …/…/template/template.wxml
这里的第一个" …/ "回到父级目录
全局样式与局部样式
定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

【微信小程序】零基础搭建微信小程序前端开发相关推荐

零基础能不能学习web前端开发？【爱创课堂专业前端培训】
web前端日趋火热,不只招聘市场需求量大,还有一个重要的原因便是,入行门槛低,入门简单.单是关于许多小白同学来说还是有点担心,不知道零基础能不能学习web前端开发? 以为没那么简单.其实web前端是一 ...
零基础成为月薪过万前端开发工程师，很难吗？
前端开发,是目前互联网行业中非常热门的开发岗位.是通过HTML.CSS.JavaScript代码编程,完成PC网页,移动端网页,小程序,APP的用户界面布局设计和开发.通过用户界面开发,提供给用户良好 ...
微信小程序零基础入门【小程序的下载、安装与首项目配置】
目录第一步.注册小程序开发账号第二步.下载并安装微信小程序第三步.首次创建小程序第一步.注册小程序开发账号 (1)点击注册按钮微信公众平台点击该链接进入微信公众号平台,点击右上角注册按钮, ...
零基础能不能学习web前端开发？
web前端现在发展的很快,不仅招聘市场需求量大,还有一个重要的原因就是,对于初学者来说这个是入门门槛比较低,而且入门简单不像其他后台语言一样那么难. 一.web前端入行门槛低吗? 对于这个问题我们觉得 ...
零基础搭建成语小程序
这是一款微擎成语接龙成语小秀才小程序源码,该款成语接龙小程序源码还是很不错的,先安装微擎,在安装微擎模块.这款源码比较受欢迎吧,成语接龙啊什么的,都是用这一套源码.茶余饭后,就可以来一波成语接龙,不用 ...
零基础学HTML5和CSS3前端开发第一课
课程目标: 使用HTML5进行网站布局使用CSS3进行网站美化开发精美的商业网站第一章 HTML5基础概念: 网页 :互联网的基础,网络页面,网页:文字.图片.声音.视频.VR虚幻等:网站:淘 ...
微信小程序零基础入门（上）
目录第一章.前言 1.1 小程序与网页开发的区别 1.2 首次开发小程序的准备工作第二章.小程序基础结构了解 2.1 项目构成 2.1.1 项目的基本组成结构 2.1.2 小程序页面的组成部分 2 ...
知乎爆赞！4504页《微信小程序零基础入门开发文档》+《小程序实战笔记》，你学废了吗？
前言微信小程序作为近几年"微服务"的杰出代表,应用十分广泛.小程序是一种新的开放能力,开发者可以快速地开发一个小程序.小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验 ...
局部配置和全局配置_06. 教你零基础搭建小程序（解读全局配置文件-tabBar字段）...
自从开始在知乎上发教程后,发现一个事情啊, 大家对于我写的教程,都在偷偷地收藏~~ 但是, 却没有银点赞~ 知乎这个平台吧,点赞的分量比收藏更大, 这里也不是要赞(我知道自己还能做的更好), 只是希望 ...

【微信小程序】零基础搭建微信小程序前端开发

前端开发

小程序的框架

页面设置

tabBar

主页代码

【微信小程序】零基础搭建微信小程序前端开发相关推荐

最新文章

热门文章

【微信小程序】零基础搭建微信小程序 前端开发

前端开发

小程序的框架

页面设置

tabBar

主页代码

【微信小程序】零基础搭建微信小程序 前端开发相关推荐

最新文章

热门文章

【微信小程序】零基础搭建微信小程序前端开发

【微信小程序】零基础搭建微信小程序前端开发相关推荐