微信小程序_02创建一个简单的工程

学习目标

1.使用内置的控件搭建界面 2.会布局代码的书写

先去其他网站学点html,css,js的东西,再来玩微信小程序。

  • 第一步 创建工程 不说了 上篇文章演示过了
  • 第二步 创建一个文件夹 在创建必备的四个文件xx.js/xx.wxml/xx.wxss/xx.json,如下图

让学习成为一种习惯

  • 第三步 先进入app.json 文件把启动后进入的页面设置成我们创建的页面

45C6E90C-8BBF-4B82-A8B9-3E64B0CBFBBE.png

这个时候运行一些 应该会报错,因为在myPage.js 里面没有写任何东西,程序找不到执行的函数

  • 第四步 进入myPage.js 文件 输入page 会有自动补全,回车一下 我们只留下下面的代码就行,我们把其他的
  Page({
  // 在data 里面定义变量,系统会自动找到
  data:{
   // 定义一个变量,把这个值显示在页面上去
   name:"这里会显示你输入的名字" 
  },
   // 生命周期函数--监听页面加载
  onLoad:function(options){
  }
  })
  • 第五步 进入myPage.wxml 文件中 放几个控件
<view >
    <view >
        // 把刚才定义的变量直接写在这个地方,会自动和标签进行绑定
        <text > {{name}}</text>
    </view>
    <view >
         <input placeholder="�请输入你的姓名" />
    </view>
    <view>
        <button >提交</button>
    </view>
</view>

运行一下

08B63868-E9E8-435A-ABFC-CEA0B6438720.png

  • 第六步 先定义几个样式类
  <view class = "container">
    <view  class = "text-section">
      <text > {{name}}</text>
    </view>
  <view class ="input-section">
     <input placeholder="请输入您的姓名" />
  </view>
    <view class = "submit_section">
      <button class = "submit">提交</button>
    </view>
  </view>
  • 第七步 在myPage.wxss文件写样式,美化一下页面
.container{
  margin-top: 30px;
  width: 100%;
  height: 200px;
  background-color: #fff;
  padding: 0 0;
}

.text-section{
    margin-top: 20px;
    height: 30px;
    text-align: center;
    font: 16px;
     border-bottom-width: 1px;
    border-bottom-color: black;
    border-bottom-style: solid;
    color: #000;
}

.input-section{
    margin-top: 10px;
    border-bottom-width: 1px;
    border-bottom-color: black;
    border-bottom-style: solid;
    text-align: center;
}
.submit_section{
    margin-top: 10px;
    color: black;
    margin-bottom: 20px;
}
.submit{
    background: black;
    color: white;
}

此时运行一下

83F07AE4-6917-4630-B53F-56D9C7CE4C8D.png

简单的空间和布局就介绍完毕,下一篇介绍一下 事件和数据交互的过程。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ionic3+

Cordova插件扩展——Themeablebrowser自拷贝图片

插件全名叫: cordova-plugin-themeablebrowser 这个插件会弹出一个浏览器窗口,打开外部网页,功能比较强大,能自定义导航工具栏、...

1375
来自专栏我爱编程

去掉WordPress功能中的文章,评论,org链接

打开网站的根目录,找到 wp-includes 文件夹,在此目录下找到 widgets 文件夹,这个目录下有个 class-wp-widget-meta.php...

1484
来自专栏C/C++基础

Linux命令(20)——cat命令

(4)把 textfile1 的文档内容加上行号后输入 textfile2 这个文档里。

823
来自专栏coding

vue.js自定义指令

1792
来自专栏拂晓风起

让tomcat跑起php(caucho quercus简单用法,tomcat运行php)

1203
来自专栏小文博客

WordPress更新失败?正确更新方式——小文’s blog

1.7K2
来自专栏贺贺的前端工程师之路

如何使用chrome浏览器调试?

在chrome浏览器中打开http://localhost:3000,按F12,或者右击->单击【检查】.

982
来自专栏前端真相

如何发布自己的NPM包(模块)?

按照提示填写初始化信息,我的模块名称为:finitxu-npm-test,初始版本号:v1.0.0。

7158
来自专栏linjinhe的专栏

Linux动态链接

曾经不止一次遇到过这样的情况:从机器A拷贝一个二进制文件到另一台机器B,两台机器的操作系统版本一样,可是在机器A能正常运行,在机器B却提示错误。最常见的就是提示...

3018
来自专栏王磊的博客

art-template用户注册方法

应用场景nodejs Express框架,使用art-template模板引擎。 后台注册方法代码: var template = require('art-t...

4008

扫码关注云+社区

领取腾讯云代金券