微信小程序开发必备 hellow word

打开web开发者工具，新建一个纯净的项目（上一篇有建立项目），不要勾选quick start 这样就是一个什么都没得的项目！

welcome.wxml文件

<!--wxml编写基本的页面类似html-->
<view class="container"><image style="width:200rpx;height:200rpx;" class="avatar" src="/images/3.png"></image><text class="motto">Hello, 不要脸</text><!--<view class=".journey-container">--><text class="journey">开启小程序之旅</text><!--</view>    -->
</view>

app.json文件中定义项目入口文件

{"pages": ["pages/welcome/welcome"  //入口指向文件],"window": {//修改顶部导航的默认颜色，"navigationBarBackgroundColor": "#405f80"}
}

{}welcome.wxcss 样式文件，（也可以写在html内联样式）

注释：rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应，类似于rem，


/*垂直居中*/
.container{display: flex;flex-direction:column;align-items: center;/*background-color:#b3d4db;*/
}
/*头像*/
.avatar{width:200rpx;height: 200rpx;margin-top:160rpx;
}
/*字体*/
.motto{margin-top:100rpx;font-size:32rpx;font-weight: bold;
}
.journey{font-size:22rpx;font-weight: bold;line-height:70rpx;color: #405f80;margin-top:130px;border: 1px solid #405f80;width: 200rpx;height: 80rpx;border-radius: 5px;text-align:center;
}
/*背景色*/
page{height: 100%;/*background-color:#405f80;*/
}

{}app.wxss文件是公共的样式，可以将一些复用的样式提取到这个文件中，如需重新定义，只需要在welcome.wxss重新定义下样式，（如果同一个样式属性分别在{}app.wxss和welcome.wxss同时是以welcome的文件为准，就近）

如：字体公用，雅黑
text{font-family: MicroSoft Yahei;font-size: 24rpx;color: #666;
}

运行js需要在page方法里面，所以要在welcome.js中加上


Page({})

不然会报错：

Hellow, 不要脸————->完成结束！

我们总是这样走，遇见了很多，也错过了很多

微信小程序开发必备 hellow word相关推荐

微信小程序开发必备的八个插件
wechat-snippet 微信小程序代码辅助,代码片段自动完成 minapp 微信小程序标签.属性的智能补全(同时支持原生小程序.mpvue 和 wepy 框架,并提供 snippets) wxa ...
微信小程序开发必备知识点
微信小程序开发基础文章目录前言一.页面组件(WXML) 二.小程序配置(json) 1. 全局配置 2. 页面配置 3. sitemap 配置三.小程序配置(WXSS) 四.逻辑层(js) 1 ...
微信小程序开发 - 实现pdf、word等格式文件上传到后端的方法
写在前面我发现,微信的wx.uploadFile接口限制好多,而且会经常性出现bug,所以今天搜了一上午的资料, 看看能不能不要通过这个接口上传multipart/form-data格式的文件. 后 ...
微信小程序开发已经成了互联网创业的必备神器
今年第一季度,微信月活用户达到了10.4亿人,几乎可以看出每个人的移动设备中几乎都安装了微信.如今微信已经成为人们在移动互联网上活动的最重要的工具.小程序自2017年1月9日上线以来,经过一年多的更新 ...
五大微信小程序开发IDE深度评测
微信小程序已经内测有一段时间了,笔者本着好奇加学习的心态写了几个小demo,虽然在MINA框架上并没有遇到太多的坑,但官方开发工具实在不敢恭维. api提示不全,要一个个查api啊,写代码超级慢啊很 ...
微信小程序开发学习笔记007--微信小程序项目01
技术交流QQ群:170933152 今天做项目小程序开发必备基础如何独立开发一个项目豆瓣电影需要的基础: HTML+CSS JavaScript 网络先理解需求-->了解项目流程,项目 ...
【微信小程序宝典】从零开始做微信小程序开发
开发前必读简要基于大量无效开发,无法上线的案例,所以开发前部分知识十分重要:| 链接微信小程序个人注册简单步骤打开mp.weixin.qq.com,点击右上角立即注册,进入小程序注册| 链接微 ...
微信小程序wxml如何判断字符串中汉语某字符_微信小程序开发经典案例解析“嗨兔儿”...
嗨兔儿是微信公众号嗨日语歌(hitaici)助手,主要为用户提供,关键词检索,帮助手册等,为外语学习者提供一个便捷的操作方式,能够开心工作,开心生活. 开发过程及注意事项分享视频. 1. 微信小程序开 ...
微信小程序开发分析总结
本文主要记录一下初次开发小程序一些注意事项,小程序开发语言,对小程序的审核要求,小程序的特点,开发特点,后面会再写下是否有三方好用的工具,及开发中遇到的js,html,css 相关的问题及解决方法.毕 ...

微信小程序开发必备 hellow word

微信小程序开发必备 hellow word相关推荐

最新文章

热门文章