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

发布时间:2020-07-19 11:25:47 作者:IT人故事
来源:网络 阅读:563

自己尝试的写一个小demo,用到自定义样式,自定义底部导航,页面之间的跳转等小功能。
官方文档对于小程序开发来说要时刻打开https://developers.weixin.qq.com/miniprogram/dev/framework/config.html
源码:https://github.com/limingios/wxProgram.git 中的No.1

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

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

  1. 精简下项目
    >将不需要的都删除,简化成一个很简化的项目 until文件夹和logs文件夹都删除

//app.js
App({
  onLaunch: function () {
  }
})
//app.json
{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

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

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

<!--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"  } }

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

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

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

  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 }

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

  1. 修改index文件下的index.wxml和index.js了解数据绑定

<!--index.wxml-->
<view class="container">
  <text class="user-motto">{{motto}}</text>
</view>
//index.js
Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  }
})

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

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

  1. index增加样式

/* pages/index/index.wxss */
.txt-test{
  margin-top: 800rpx;
}
<!--index.wxml-->
<view class="container">
  <text class="txt-test">{{motto}}</text>
</view>

注意这个txt-test 就是私有的,index.wxml就是私有的html调用私有的样式文件,也可以看到container他这个样式就是在私有文件里面没有而在最外层的app.wxss,它就去父节点最外层找,如果最外层有用,没有也不报错。

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

PS:通过这个老铁基本的调用方式就了解了,循循渐进一步一步跟我一起学习吧。


推荐阅读:
  1. 「小程序JAVA实战」小程序多媒体组件(27)
  2. 「小程序JAVA实战」小程序导航组件(26)

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

微信开发 小程序开发 springboot

上一篇:vue常用命令v-for

下一篇:egret 发布android原生项目(二)运行项目

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》