小程序模板网

微信小程序基础《二》新建项目文件详细图解,最简单Demo设计 ... ...

第一部分:新建的项目文件图解

 

第二部分:最简单的Demo设计使用

这个小Demo,代码量不多:导航样式、View、Text、点击、JS交互的使用,主要是理解每个后缀文件的功能,然后才能更好的使用开发.......(下面代码和源代码没差别,实在想要的请留言,谢谢。。。)

首先在index.wxml中创建相关控件


					
  1. <!--创建一个背景为蓝色的View,并且添加点击事件,输出启动日志-->
  2. <view bindtap="bindViewTap" class="myView">
  3. <text class="myView-clickK">点我点我</text>
  4. </view>
  5.  
  6. <!--创建了一个text标签,然后执行了JS交互,在indexindex.js中进行赋值-->
  7. <view class="usermotto">
  8. <text class="user-motto">{{motto}}</text>
  9. </view>
  10. </view>

然后在index.wxss中设计控件位置和属性样式,


					
  1. /**rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。
  2. 规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,
  3. 则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。开发建议:
  4. 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。UI设计图建议:使用
  5. 设计稿使用设备宽度750px比较容易计算750px的话1rpx=1px,这样的话,设计图上量出
  6. 来的尺寸是多少px就是多少rpx**/
  7. .myView{
  8. width: 200rpx;
  9. height: 200rpx;
  10. margin-top: -100rpx;
  11. background-color: blue;
  12. }
  13. .myView {
  14. display: flex;
  15. flex-direction: column;
  16. align-items: center;
  17. width: 200rpx;
  18. height: 200rpx;
  19. margin: 20rpx;
  20. border-radius: 50%;
  21. }
  22. .myView-clickK {
  23. margin-top: 75rpx;
  24. height: 50rpx;
  25. color: red;
  26. }
  27. .usermotto {
  28. margin-top: 100rpx;
  29. }

涉及到交互功能,所以在index.js中,设置内容


					
  1. data: {
  2. motto: 'Hello World,你好,世界!'
  3. },
  4. //事件处理函数
  5. bindViewTap: function() {
  6. wx.navigateTo({
  7. url: '../logs/logs'
  8. })
  9. },

设置导航样式,需要在app.json中进行设置

效果展示:



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/22967.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询