微信小程序入门

微信小程序 入门

一.概述

1.注册小程序账号

https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN
注册邮箱：1123372911@qq.com

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"
    }
})

• 属性绑定