初步了解小程序

简介: 初步了解小程序

一、了解微信小程序

微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用
张小龙发布时间2017年1月9日

二、微信小程序和普通H5的区别

1. 微信小程序用开发者工具来查看预览页面,H5用浏览器来查看渲染页面
2. 微信小程序扩展了底层能力,H5调用底层能力比较弱
3. 微信小程序没有完整的JS API,但H5拥有完整的JS API(EcmaScript,DOM,BOM)开发能力
4. 渲染机制不同:微信小程序渲染线线程和逻辑线程是独立并行运行的,而H5只是一个线程

三、微信小程序的使用流程

  1. 注册微信小程序帐号
注册地址:
https://mp.weixin.qq.com/wxopen/waregister?action=step1&token=&lang=zh_CN

image.png

  1. 安装微信开发者工具
下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
  1. 创建小程序项目
  2. 快乐用小程序开发项目啦。。。
  3. 如何在手机上预览项目
点击微信开发者工具顶部的预览
  1. 小程序如何添加开发成员
微信小程序后台->管理->成员管理->成员管理

四、微信小程序开发目录说明

  1. pages
项目开发目录 相当于vue脚手架中的src目录
一个完整的小程序页面包括4部分:
1. xxx.wxml :模板页面(也称视图,类似于html)
  常用标签:
    view:相当于div
    button:按钮
    image:嵌入图像  类似于img
    text:添加文本 相当于span
    block:标签一个组织区域,最终不会渲染到页面上,相当于vue中的template
2. xxx.wxss:页面样式 相当于css
   注意:用rpx代表响应式单位 类似于rem
3.xxx.js: 写页面逻辑的 
4.xxx.json:页面的配置
  注意:页面的json配置来源于全局(app.json)配置中window字段
参考官方文档:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#window
  1. utils
存放封装的工具函数的目录
  1. app.js
是小程序的入口js文件 相当于vue中的main.js
通过App({})构造器实现
  1. app.json
小程序的全局配置
例如:
{
//小程序管理的所有页面路径
  "pages":[  
    "pages/index/index",
    "pages/logs/logs"
  ],
  //小程序的窗口表现
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "1909A",
    "navigationBarTextStyle":"white"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}
  1. app.wxss
是小程序的全局css样式,全影响所有的页面外观


  1. project.config.json
工具的统一配置
  1. 如何给小程序添加新的页面
在app.json的pages中直接添加新建的页面路径
{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/cate/cate",
    "pages/shopping/shopping"
  ],
....
}

image.png

  1. wxss相关
rpx:(responsive pixel): 可以根据屏幕宽度进行自适应
  使用:量多少使用多少 用ps测量 100px,就是100rpx
参考设计师可以用 iPhone6 作为视觉稿的标准
样式导入:@import  主要用于复杂项目样式复用
  1. 小程序常用渲染指令
1.遍历 wx:for  相当于vue的v-for
例如:
 <view wx:for="{{ list2 }}" wx:for-index="n" wx:for-item="itm">
           <text>编号:{{ n+1 }}---姓名:{{ itm.name }}</text>
 </view>
 注:
 item:遍历的每一项
 index:每一项的下标
 wx:for-index:更改下标名
 wx:for-item:更改每一项的名称
 2.条件渲染
  wx:if 相当于vue的v-if       true:显示,false:隐藏
   wx:if  满足条件渲染
   wx:else  不满足条件渲染
  hidden 相当于vue的v-show的反值   true:隐藏,false:显示
  1. 小程序如何绑定事件
bind+事件名="方法名"
例如:
 <button bindtap="deleteItem">X</button>
 交互过程中视图不同步如何解决?
 this.setData()
   this.setData({
     list2: this.data.list2
   })
  1. 页面之间如何传参
自定义属性:将页面上的参数传递给js
  <view data-自定义名称="参数值">
 通过触发事件,在事件方法中接收
  let {index}=e.currentTarget.dataset
  deleteItem(e) {
    let {index}=e.currentTarget.dataset
    console.log(index)
  },
路由跳转传参:页面与页面之间传参
目录
相关文章
|
1月前
|
程序员 Python
踢球程序
【10月更文挑战第24天】
31 3
踢球程序
|
小程序
关于打卡小程序可能会遇到的部分问题
关于打卡小程序可能会遇到的部分问题
118 0
关于打卡小程序可能会遇到的部分问题
|
小程序 前端开发 程序员
【小程序】网络数据请求
【小程序】网络数据请求
255 0
【小程序】网络数据请求
|
小程序 IDE 前端开发
重新理解小程序的未来
小程序技术不再是互联网巨头的专属
100 0
重新理解小程序的未来
程序人生 - 一直打嗝怎么办?
程序人生 - 一直打嗝怎么办?
106 0
|
Web App开发 移动开发 人工智能
小程序的新战事
小程序的新战事
142 0
小程序的新战事
|
JavaScript 前端开发 Shell
神奇的自产生程序
最近读到冯·诺依曼的《Theory of Self-Reproducing Automata》的中译本,被自复制自动机理论深深吸引了!
320 0
神奇的自产生程序
如何跳小程序
       经常会有人遇到这样的疑惑——        我有自己的APP、生活号或在支付宝端内有自己的H5页面,这种情况下如何和小程序关联,跳转到小程序里去,做到无缝对接?        其实,小程序是支持这类跳转能力的;        那么,要如何实现呢?        一、非小程序前端——跳转小程序 window.
660 12
|
算法
循序渐进写程序
【来信】   老师,我现在是初学编程,感觉自己的编程能力比较弱,如果做一道算法题,有时候需要两三个小时,做出来之后还没有答案上给的算法好,应该是练习比较少,我是应该多看别人写好的算法,然后多敲代码好呢,还是尽量自己写,写不出来再看答案好呢(感觉自己写好浪费时间) 【回复】   我们的学习,要讲究循序渐进。你出现这种情况,应该是做的题目中,包含了太多对你而言是“新知识”的
1021 1