微信小程序入门

微信小程序 入门

一.概述

1.注册小程序账号
https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN
注册邮箱:[email protected]
2.安装开发者工具
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
3.获取appID
我的:wx006880ae481cff72
4.vscode插件安装
minapp
小程序助手
vscode weapp api 
vscode wxml 
vscode-wechat 
WeApp Snippets
wechat-snippet
vscode-icons
5.豆瓣接口
http://t.yushu.im/v2/movie/top250
https://douban.uieee.com/v2/movie/top250
https://douban.uieee.com/v2/movie/in_theaters  //正在热映
https://douban.uieee.com/v2/movie/coming_soon //即将上映
https://douban.uieee.com/v2/movie/us_box //北美票房
https://douban.uieee.com/v2/movie/new_movies //新片榜
https://douban.uieee.com/v2/movie/weekly //本周口碑榜

//搜索
https://douban.uieee.com/v2/movie/search?q=keyword

//搜索书籍
https://api.douban.com/v2/book/search?q=javascript&count=1

//条目信息
http://t.yushu.im/v2/movie/subject/3

//获取固定数量的数据
http://t.yushu.im/v2/movie/top250?start=0&count=20
6.开发者文档
https://developers.weixin.qq.com/miniprogram/dev/index.html?t=18080816 

app.json --项目的一些配置信息
index.wxml -- 写标签(页面)
index.wxss -- 修改样式

.json 后缀的 JSON 配置文件
.wxml 后缀的 WXML 模板文件
.wxss 后缀的 WXSS 样式文件
.js 后缀的 JS 脚本逻辑文件

二.各类型文件/配置

1.小程序配置 app.json

app.json 是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等 ,是程序的入口

详情可查 小程序框架文档
{
  "pages": [
  "pages/index/index", 
  "pages/logs/logs"
  ],
  "window": {
     "navigationBarBackgroundColor": "#333",
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "小程序",
        "navigationStyle": "default|custom",
        "backgroundColor": "#333",
        "backgroundTextStyle": "dark|light",
        "backgroundColorTop": "#ffffff",
        "backgroundColorBottom": "#ffffff",
        "enablePullDownRefresh": false,
        "onReachBottomDistance": 50
  }"tabBar": {
    "color": "#666",
    "selectedColor": "#3785F9",
    "position": "bottom",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "电影",
        "iconPath": "/images/dianying.png",
        "selectedIconPath": "/images/dianying_hl.png"
      },
      {
        "pagePath": "pages/map/map",
        "text": "地图",
        "iconPath": "/images/map.png",
        "selectedIconPath": "/images/map_hl.png"
      }
    ]
  }
}
  1. pages字段 —— 当前小程序所有页面路径列表。
  2. window字段 —— 全局的默认窗口表现, 所有页面的顶部背景颜色,文字颜色定义等。
  3. tabBar字段-- 底部 tab 栏的表现

2.小程序app.js和page.js

app.js:

小程序启动之后,在 app.js 定义的 App 实例的 onLaunch 回调会被执行:
App({
    onLaunch: function () {
    	//监听
       //小程序启动之后 触发
    },
    onShow: function () {
        //浏览时触发
    },
    onHide: function () {
       //关闭或隐藏时触发
    }
})

page.js

Page({
  data: { // 参与页面渲染的数据
    logs: []
  },
  onLoad() {
    // 页面渲染后 执行
  }
})

3.小程序index.wxml

(1)例子

(WXML 充当的就是类似 HTML 的角色)

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 button>
    <block wx:else>
      <image src="{{userInfo.avatarUrl}}" background-size="cover">image>
      <text class="userinfo-nickname">{{userInfo.nickName}}text>
    block>
  view>
  <view class="usermotto"> <text class="user-motto">{{motto}}text> view>
view>
(2) 数据绑定{{}}
  • 数据绑定:
//index.wxml
<view>
	<text>{{msg}}text>
view>
//index.js
Page({
    data: {
        msg:"hello zhixing"
    }
})
  • 属性绑定
<view class="container" data-name="{{name}}">
   <text>{{msg}}text>
view>
//index.js
Page({
    data: {
        msg:"hello zhixing",
        name:"Jake"
    }
})
  • 条件渲染
<view hidden='{{flag?true:false}}'>
  hidden
view>
//index.js
Page({
    data: {
        flag:true
    }
})

微信小程序入门_第1张图片

(3)列表渲染wx:for
  • wx:for数组中各项的数据重复渲染该组件

默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item

<view wx:for="{{array}}">
  {{index}}{{item.name}}
view>
Page({
  data: {
    array: [{
      name: 'chengchao',
    }, {
      name: 'jiangwei'
    }]
  }
})
  • wx:for-item``wx:for-index

使用 wx:for-item可以自定义数组当前元素的变量名

使用wx:for-index可以自定义数组当前下标的变量名

<view wx:for="{{array}}" wx:for-item="myItem" wx:for-index="ind">
  {{ind}}{{myItem.name}}
view>
  • block wx:for渲染一个包含多节点的结构块
<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: view>
  <view> {{item}} view>
block>
//希望数据动态更新,给每一个节点,添加唯一的标识符加上wx:key
<view wx:for="{{array}}" wx:for-item="item" wx:key="index">
{{index}}{{item.name}}
view>
(4)条件渲染wx:if

wx:if

<view wx:if="{{condition==1}}">
吃米饭
view>

吃粥
view>
<view wx:else>
不吃
view>
Page({
	data:{
    	condition : Math.floor(Math.random()*3+1)
    }
 })

demo:
1.使用点击事件,实现图片切换



//js
Page({
  data: {
    show:false
  },
  click(){
    if(this.data.show){
      this.setData({
        show:false
      })
    }else{
      this.setData({
        show:true
      })
    }
  }
})

2.使用三元表达式


(5)模板引用
  • WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用
//定义模板
<template name="temp">
  <view>
    <view>收件人:{{name}}view>
    <view>联系方式:{{phone}}view>
  view>
template>

//is使用模板