自己尝试的写一个小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"
}
}
<!--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"
}
}
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.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')
}
})
/* 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,它就去父节点最外层找,如果最外层有用,没有也不报错。
PS:通过这个老铁基本的调用方式就了解了,循循渐进一步一步跟我一起学习吧。