微信小程序的简单页面设计（不涉及后端）

大一萌新在朋友推荐下尝试写博客记录下自己的学习经历

因为参加了学校的比赛的原因，需要自学一下微信小程序的制作。
目前只学习了简单的页面设计，本次做个小结

首先
简单学习了墨刀的使用
通过B站的视频学习下
成功的做出（复制）了学习项目的简单实现，既“树洞”

第二点
在B站观看完每一个页面的代码后，自己动手敲出代码，只有效果实在不理想并且无法完成时才会倒回去抄代码并记录（这点我还是很欣慰的，嘿嘿）

其中值得记录的点：

//底部菜单栏的引用。

**<include src="/pages/bottom_menu/bottom_menu"/>**

可以将底部菜单栏固定在需要的页面，不用在页面重复编写代码。<include />

//相应的样式引入 @import

@import "/pages/bottom_menu/bottom_menu";

接下来

正则表达式的使用

在这次学习目标中，注册是的电话号码需要用正则表达式来判断是否合理

var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})]|(18[0-9]{1}))+\d{8})$/;

用来检验是否为13，15，17，18开头且位数为11的手机号

最后一点：

在不同页面的.js文件的中完成墨刀模型中的状态改变

通过给view代码绑定style，但是不同页面的.js 给予不同的数据定义
例如本次学习目标：
现在bottom_menu页面中进行

<text class="bottomtabtext" style="color:{{com}}">我的</text>
<text class="bottomtabtext" style="color:{{cos}}">广场</text>

下面是mine.js中的数据定义

cos: "#000000",com: "#979797",

下面是square.js的数据定义

cos: "#000000",com: "#979797",

借此来完成mine和square页面跳转时底部菜单栏的状态改变

微信小程序的简单页面设计（不涉及后端）相关推荐

微信小程序入门-简单页面编写
前言今天微信小程序正式上线,抱着学习新技术的心态开始第一次接触微信小程序,无论外面怎么吹微信小程序怎么干掉大量的原生的app,作为一个新的事物,存在就必定有其存在的价值,作为一个学习者要保持一个正确 ...
【小程序】微信小程序登录/注册页面设计
界面设计页面引用了youzan组件进行设计,包括icon,button,tag,toast以及布局 github地址:https://github.com/youzan/zanui-weapp 实现 ...
微信小程序的简单介绍
微信小程序的简单介绍 1.与HTML的区别 HTML 微信小程序 <div></div> <view></view> <h1></h1 ...
【来一杯word】微信小程序项目需求分析及设计初稿
[来一杯word]微信小程序从零到上线一.[来一杯word]微信小程序项目需求分析及设计初稿文章目录 [来一杯word]微信小程序从零到上线前言一.需求分析.功能实现 1.界面设计 2.单位转 ...
微信小程序开发教程第七章：微信小程序编辑名片页面开发
前面我们更新了六篇的微信小程序开发教程,现在更新第七章:微信小程序编辑名片页面开发,(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程 ...
Java Web项目，Android和微信小程序的初始页面配置
Java Web项目我们在Eclipse里开了Java Web项目之后,Run As Tomcat或者Apache服务器,本地运行,如果直接用http://localhost:8080访问项目,会发 ...
微信小程序个人中心页面开发
目录微信小程序创建项目配置底部导航栏微信小程序滚动播放内容微信小程序功能中心模块开发微信小程序个人中心页面开发微信小程序获取电话号码微信小程序显示列表数据微信小程序显示分页列表微信小程 ...
【微信小程序系列】微信小程序超简单教程，基本语法，获取用户基本数据信息，实现对云数据库的增删改查及小程序外部api的引用示例（附源码）
[微信小程序系列]微信小程序超简单教程小程序项目结构静态页面的构成 HTML:结构 css:样式 js:行为小程序页面全部存放在pages, 而且pages目录只能存放页面页面包括4个文件, ...
微信小程序：简单舒服新UI装逼制作神器
这是一款装逼神器小程序源码内包含了N种模板制作,另外并有大分类另外小编还给添加了几个流量主广告,包含了每一个页面都覆盖了而且流量主还不是单一种: Banner 激励视频视频广告多格子广告横 ...

微信小程序的简单页面设计（不涉及后端）

微信小程序的简单页面设计（不涉及后端）相关推荐

最新文章

热门文章