「小程序JAVA实战」 小程序手写属于自己的第一个demo(六)
转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-06/
自己尝试的写一个小demo,用到自定义样式,自定义底部导航,页面之间的跳转等小功能。
官方文档对于小程序开发来说要时刻打开https://developers.weixin.qq.com/miniprogram/dev/framework/config.html
源码:https://github.com/limingios/wxProgram.git 中的No.1
创建小程序
- 项目名称创建
- 精简下项目
>将不需要的都删除,简化成一个很简化的项目 until文件夹和logs文件夹都删除
//app.js
App({
onLaunch: function () {
}
})
//app.json
{
"pages":[
"pages/index/index"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
- 定义文件夹+自定义页面内容
* 复制index文件夹为idig88,将文件夹内保留idig88.js 和idig88.wxml
* 精简idig88.wxml内容
* 新增的idig88.wxml添加到app.json中,并添加到第一行让起第一个启动
* console 可能会报错,先不用管,后面咱们会解决的,第一个主要先能出效果
* 了解小程序构成结构
<!--idig88.wxml-->
<view class="container">
这是第一个demo小程序
</view>
app.json
{
"pages":[
"pages/idig88/idig88",
"pages/index/index"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "第一个demo",
"navigationBarTextStyle":"black"
}
}
- 添加底部导航栏tabBar和网络超时设置
app.json
{
"pages":[
"pages/idig88/idig88",
"pages/index/index"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "第一个demoe",
"navigationBarTextStyle":"black"
},
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/idig88/idig88",
"text": "详情页面"
}
]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true
}
- 修改index文件下的index.wxml和index.js了解数据绑定
- 在微信小程序,不像之前的html那种结构,这里得都是view容器的概念,要显示什么首先要通过view容器的方式。
<!--index.wxml-->
<view class="container">
<text class="user-motto">{{motto}}</text>
</view>
- 每个js都必然有Page({}) 这种结构
- data就是数据,里面有多个变量如果需要在页面显示绑定的数据{{变量名称}}
//index.js
Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
}
})
- index增加样式
* 新建index.wxss文件添加样式名称
* txt-test 定义局顶部的距离,在微信小程序开发建议使用rpx,这个可以做到手机端的适配
/* pages/index/index.wxss */
.txt-test{
margin-top: 800rpx;
}
- 引用css名称为txt-test的样式放入text容器内
<!--index.wxml-->
<view class="container">
<text class="txt-test">{{motto}}</text>
</view>
注意这个txt-test 就是私有的,index.wxml就是私有的html调用私有的样式文件,也可以看到container他这个样式就是在私有文件里面没有而在最外层的app.wxss,它就去父节点最外层找,如果最外层有用,没有也不报错。
「小程序JAVA实战」 小程序手写属于自己的第一个demo(六)的更多相关文章
- 「小程序JAVA实战」小程序的flex布局(22)
转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-22/ 之前已经把小程序的框架说完了,接下来说说小程序的组件,在说组件之前,先说说布局吧.源码:ht ...
- 「小程序JAVA实战」小程序的留言和评价功能(70)
转自:https://idig8.com/2018/10/28/xiaochengxujavashizhanxiaochengxudeliuyanhepingjiagongneng69/ 目前小程序这 ...
- 「小程序JAVA实战」小程序的举报功能开发(68)
转自:https://idig8.com/2018/09/25/xiaochengxujavashizhanxiaochengxudeweixinapicaidancaozuo66-2/ 通过点击举报 ...
- 「小程序JAVA实战」小程序的个人信息作品,收藏,关注(66)
转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudegerenxinxizuopinshoucangguanzhu65 ...
- 「小程序JAVA实战」小程序的关注功能(65)
转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudeguanzhugongneng64/ 在个人页面,根据发布者个人和 ...
- 「小程序JAVA实战」小程序的视频点赞功能开发(62)
转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudeshipindianzangongnengkaifa61/ 视频点 ...
- 「小程序JAVA实战」小程序的springboot后台拦截器(61)
转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudespringboothoutailanjieqi60/ 之前咱们把 ...
- 「小程序JAVA实战」小程序首页视频(49)
转自:https://idig8.com/2018/09/21/xiaochengxujavashizhanxiaochengxushouyeshipin48/ 视频显示的内容是视频的截图,用户的头像 ...
- 「小程序JAVA实战」小程序视频封面处理(48)
转自:https://idig8.com/2018/09/16/xiaochengxujavashizhanxiaochengxushipinfengmianchuli47/ 截图这块,在微信小程序工 ...
随机推荐
- 【nyoj-1274】信道安全(SPFA)
题目链接:http://acm.nyist.edu.cn/JudgeOnline/problem.php?pid=1274 题目描述 Alpha 机构有自己的一套网络系统进行信息传送.情报员 A 位于 ...
- 移动端 HTML5 <video> 视频播放优化实践
遇到的挑战 移动端HTML5使用原生<video>标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题. 下载速度 以一个8s短视频为例,wifi环境下提供的高清视频达 ...
- Android自定义控件之仿美团下拉刷新
美团的下拉刷新分为三个状态: 第一个状态为下拉刷新状态(pull to refresh),在这个状态下是一个绿色的椭圆随着下拉的距离动态改变其大小. 第二个部分为放开刷新状态(release to r ...
- http://www.cnblogs.com/peida/archive/2013/05/31/3070790.html深入理解Java:SimpleDateFormat安全的时间格式化
http://www.cnblogs.com/peida/archive/2013/05/31/3070790.html
- Leetcode 867. Transpose Matrix
class Solution: def transpose(self, A: List[List[int]]) -> List[List[int]]: return [list(i) for i ...
- Asyphre for Delphi Xe4 Demo Running on iPad!
Asyphre 4.0 . customize bitmap with asvf file. compiled done! check the video!
- [转载] ffmpeg Windows下采集摄像头一帧数据,并保存为bmp图片
这里请注意,在编译ffmpeg时,不要使用--disable-devices选项. 使用 --enable-encoder=rawvideo --enable-decoder=rawvideo 启用r ...
- 数据结构之最小生成树Prim算法
普里姆算法介绍 普里姆(Prim)算法,是用来求加权连通图的最小生成树算法 基本思想:对于图G而言,V是所有顶点的集合:现在,设置两个新的集合U和T,其中U用于存放G的最小生成树中的顶点,T存放G的最 ...
- MySql必知必会实战练习(三)数据过滤
在之前的博客MySql必知必会实战练习(一)表创建和数据添加中完成了各表的创建和数据添加,MySql必知必会实战练习(二)数据检索中介绍了所有的数据检索操作,下面对数据过滤操作进行总结. 1. whe ...
- python 爬虫的一些使用技巧
1.最基本的抓站 import urllib2 content = urllib2.urlopen('http://XXXX').read() -2.使用代理服务器这在某些情况下比较有用,比如IP被封 ...