码迷,mamicode.com
首页 > 微信 > 详细

「小程序JAVA实战」 小程序手写属于自己的第一个demo(六)

时间:2019-01-15 10:39:58      阅读:226      评论:0      收藏:0      [点我收藏+]

标签:cimage   添加   upload   多个   suse   auto   MinIP   就是   ogr   

转自: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

 

创建小程序
  1. 项目名称创建

技术分享图片

  1. 精简下项目
    >将不需要的都删除,简化成一个很简化的项目 until文件夹和logs文件夹都删除
//app.js
App({
  onLaunch: function () {
  }
})
//app.json
{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

技术分享图片

  1. 定义文件夹+自定义页面内容

* 复制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" } }

技术分享图片

技术分享图片

技术分享图片

  1. 添加底部导航栏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 }

技术分享图片

  1. 修改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‘)
  }
})

技术分享图片

技术分享图片

  1. 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(六)

标签:cimage   添加   upload   多个   suse   auto   MinIP   就是   ogr   

原文地址:https://www.cnblogs.com/sharpest/p/10269934.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!