微信小程序第一课:从0开始完成一个卡片应用

目的:通过4-5天的微信小程序学习,从0开始到能够发布一款今日头条小程序到线上。

目的:通过4-5天的微信小程序学习,从0开始到能够发布一款今日头条小程序到线上。

一、微信小程序是什么

运行在微信中的APP框架,可以简单理解为在微信中运行的网页。微信小程序要依赖微信APP。JQ插件依赖JQ一样。

小程序的使用体验接近原生APP,目前大部分中小型企业会选择开发小程序而不是开发独立版的APP。

二、 微信开发有哪些

  1. 微信公众号开发- H5,即移动端网站(跟微信无关只是将移动端页面链接到了公众号菜单中)
  2. 微信小程序开发目前在学习的
  3. 微信小游戏开发

三、开发小程序的准备工作

  1. 下载微信官方的开发者工具
  2. 需要申请一个APPID(需要注册一个微信小程序-今天不用,等发布时再注册)发布版本:体验版-审核版-正式版开发和发布微信小程序都是免费的

四、如何使用开发者工具

  1. 下载和安装https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
  2. 打开并扫描绑定开发者账号
  3. 通过该工具可以完成新建小程序模板、开发、调试、发布等一系列工作

五、如何新建一个微信小程序页面

使用开发者工具可以一键生成小程序项目模板。该模板相当于是vue的脚手架生成的vue的豪华版。

跟Vue的区别:

vue很多东西都需要自己下载,因为vue是渐进式的

微信小程序不需要下载任何东西,内置各种你想要的功能,比如路由内置了,ajax也内置了,所有的都可以直接使用,比vue还要强约定。

新建页面的步骤:在pages目录下右键单击新建文件夹,然后在该文件夹下右键单击新建page。新建后会自动将该页面注册到app.json中(即路由)

  1. 一个文件夹代表的就是一个页面
  2. 一个页面包括4个文件a. wxml(视图层-类似于HTML,不可省)b. wxss(外观层-同css,可省)样式的语法同css。c. js (逻辑层,用来获取数据和渲染数据的,不可省)

    d.json(该页面的配置文件,比如配置页面的标题,标题背景色等)

注意:微信小程序是纯前端代码,在这里不能放任何后端代码,比如java、Python等都不能放。是绝对的前后端分离。

app.json说明:


"window": {
    //下拉时的背景:light或dark
    "backgroundTextStyle": "light",
        //导航栏的背景色,只能写16进制的颜色代码
    "navigationBarBackgroundColor": "#f60",
        //标题
    "navigationBarTitleText": "卡片应用",
        //标题的颜色文字:只有black或white
    "navigationBarTextStyle": "white"
  },

六、在微信小程序中写样式

  1. 全局样式app.wxss中写的样式在任何页面下都可以生效
  2. 页面样式在当前页面下的样式文件中写的样式
  3. 注意问题写的样式跟css一模一样。但是微信中只支持常用的选择器,不要用那种冷门的css3选择器。即只支持部分css3选择器。

七、小程序常用标签学习

小程序的标签其实是自定义标签,也叫组件。

https://developers.weixin.qq.com/miniprogram/dev/component/

  1. view
    类似于div,作用跟div一样,相当于是块级标签
    <view class="box" style="color:red">内容</view>
    
  2. imagehttps://developers.weixin.qq.com/miniprogram/dev/component/image.html
    类似于img标签,作用一样
    <image src="图片路径" mode="scaleToFill|aspectFit|aspectFill|widthFix"></image>
    
  3. input
    跟input一样
    <input>
    
  4. navigator
    相当于是a链接
    <navigator url="url">这里是链接</navigator>
    
  5. text
    相当于是行内标签
    <text class="s1">内容</text>
    

八、小程序的几个常用指令

  1. 小胡子语法
    <view>{{表达式或来自data中的数据}}</view>
    
  2. wx:if 都是用来显示或删除元素
    //vue
    v-if="数据或表达式"
    //小程序中
    <view wx:if="{{数据或表达式}}">是否显示</view>
    
  3. wx:for
    //vue
    <li v-for="item,index in arr|obj">{{item}}</li>
    //wx
    <view wx:for="{{arr|obj}}" wx:key="index">{{item}}--{{index}}</view>
    

本次课笔记+作业链接:

此资源下载链接已被无情的隐藏,请输入验证码解锁:
验证码

请关注本站公众号回复“验证码”,获取验证码。

在微信里搜索“WEB前端全栈圈”或者“imqdcn”或者微信扫描二维码都可以关注微信公众号

WEB前端全栈圈
除特别声明外, 本站所有内容皆为原创,未经许可,禁止转载。转载时请务必以超链接形式标明文章出处和作者信息
  • 588
(0)
打赏 微信扫一扫 微信扫一扫
                       

关于作者:

web前端老罗

贡献:已经在WEB前端圈发表90篇文章了

简介:前端老罗是一位拥有多年web前端开发经验、管理经验、教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。加我微信:imqdcnn可提供开发、技术咨询、答疑、直播讲座等服务

Ta的专栏 | Ta的站点 | 其他SNS

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关于WEB前端圈

我是前端人(imqd.cn)愿景是不管你是想学习前端还是一名专业的WEB前端工程师在这里都能找到你想要的物料。定位为前端人学习进步的一个平台。在这里你能找到前端学习笔记、教学视频资源、案例、前后端分离、前端框架、低代码平台、可视化数据、多端开发、全栈开发等跟前端有关的一切资源!

关于站长:WEB前端老罗(罗老师)是一位拥有多年web前端开发经验、管理经验、IT培训教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。右边加我微信可提供开发、技术咨询、答疑、直播讲座等服务

WEB前端圈二维码

右边添加老罗微信一对一免费私聊
拉你加入官方微信答疑群

To top