美文网首页前端之路
小程序入门(一)

小程序入门(一)

作者: 冫笙 | 来源:发表于2018-04-18 12:59 被阅读74次

        如果你是一点基础都没有的(html、css、js这些不会的)可以去看http://www.w3school.com.cn/这里先学学能够达到基本的页面布局就差不多了。


      小程序的基础配置(开发工具啊、个人先申请小程序啊、appid啊 什么乱七八糟的)具体请参考小程序开发文档 https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/getting-started.html

        准备就绪我们现在开始(刚开始建议多写些静态页面 熟悉新的环境)。打开开发者工具 用你的微信扫一下登录。在桌面新建一个空文件夹命名(随意那里记着路劲就好)。新建项目--》选择到你刚新建的文件夹-》填写appid(申请的小程序会有一个appid,也可以点击体验小程序)-》项目名称(以后项目多了  便于你识别)-》勾选新建空白快速启动模板

图片来自简书

这些看小程序的开发文档都有说明我就不说了文档比我说的清楚多了(小程序官方文档);了解小程序基础后。新建一个空白的page页面(名字随意 命名最好 见名知意)。

        小程序布局中主要用 “view、text、images”这几个标签布局(最常用的,还有一些组件详细见文档档-》组件)。我在github里上传了一个官方dome 里面的组件都有 下载后,把appid改成你的就好。

图片来自简书

下面我们做个这样的页面 (注意:我们拿到ui的设计图的时候 先分析下 它的布局结构。先搭建一个模块的整体框架 框架搭建搭完 在写样式  小程序推荐使用flex布局 贼鸡儿好用)。下面是头部轮播图的布局(轮播组件(swiper))。“flex、cloumn”类我在app.wxss里定义的(晚上我会上传一个关于flex布局的文章。大家可以去百度查一下)。

图片来自简书 图片来自简书

hot部分:


图片来自简书 图片来自简书

content:


图片来自简书 图片来自简书

这玩意太多了也没上传到github 想要的话加我qq 17472544 私我我发给你 。文笔不好都是大白话 见谅见谅。 有问题可以评论,您的评论是我最大的动力 蟹蟹。

emmmm

相关文章

  • 【教程】微信小程序入门

    微信小程序入门基础知识 Moustache:我的微信小程序入门踩坑之旅 github精选:微信小程序入门简要教程 ...

  • 微信小程序

    微信小程序入门 入门简易教程 小程序开发流程注册小程序->代码开发->提审->上线/审核未通过 开发者工具左侧模拟...

  • 小程序入门(一)

    如果你是一点基础都没有的(html、css、js这些不会的)可以去看http://www.w3school...

  • 小程序进阶(1)豆瓣电影_布局搭建

    -(Ctrl+s)保存编辑的内容,不然调试不会出效果!!! 小程序入门(0)项目创建篇 小程序入门(1)项目结构篇...

  • 微信小程序入门

    小程序入门上午: 一、小程序账号申请: 1.1、到网站申请小程序开发账号 注册地址https://mp.weixi...

  • 微信小程序(实战极速版)新手入门

    对腾讯火热推出的微信小程序进行超快的入门,快速掌握微信小程序的入门及基础知识学习技巧,并带您搞定一个网络博客小程序!

  • 小程序入门(2)浅析篇

    (Ctrl+s)保存编辑的内容,不然调试不会出效果!!! 有了小程序入门(0)项目创建篇||小程序入门(1)项目结...

  • 微信小程序开发入门之共享账本(一)

    /微信小程序开发入门之共享账本(一)

  • 本周(12.23-12.29)半价电子书

    点击此处,一键购买 《微信小程序开发入门精要》 作者:李宁 微信小程序开发入门精要 系统全面、循序渐进地介绍了进行...

  • 小程序 入门

    title: 小程序 入门date: 2017-04-11 03:50:12tags: 小程序categories...

网友评论

本文标题:小程序入门(一)

本文链接:https://www.haomeiwen.com/subject/yxdvkftx.html