小程序核心内容和安装配置

核心内容和安装配置"/>

小程序核心内容和安装配置

• (一) 开发工具
• (二) 构建项目
• (三) 小程序配置
• (四) 小程序控制台配置
• (五) 小程序使用nodejs模块

(一) 开发工具#

小程序开发工具下载地址:

.html

(二) 构建项目#

1. 可以新建,也可以导入原有项目
2. 需要去注册一个小程序以获得AppId, 当然也可以使用测试号

(三) 小程序配置#

3.1 app.json全局配置#

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置

.html

3.2 app.json 配置文件详解#

{// 页面路径"pages": ["pages/index/index","pages/cart/cart","pages/detail/detail","pages/my/my","pages/demo/demo"],// 导航栏配置"window": {// 导航栏颜色"navigationBarBackgroundColor": "#f8f8f8",// 导航栏文字"navigationBarTitleText": "花间",// 导航文字样式"navigationBarTextStyle": "black",// 背景文字样式"backgroundTextStyle": "dark",// 背景颜色"backgroundColor": "#f8f8f8"},// 底部tab栏"tabBar": {// tab文字和图片默认颜色"color": "#797d82",// 选中的tab的字体和图片颜色"selectedColor": "#c03131",// tab列表配置"list": [{// tab图片地址"iconPath": "./img/home.png",// tab被选中时的图片地址"selectedIconPath": "./img/homeing.png","pagePath": "pages/index/index","text": "首页"}, {"iconPath": "./img/cart.png","selectedIconPath": "./img/carting.png","pagePath": "pages/cart/cart","text": "购物车"},{"iconPath": "./img/my.png","selectedIconPath": "./img/mying.png","pagePath": "pages/my/my","text": "个人中心"},{"iconPath": "./img/my.png","selectedIconPath": "./img/mying.png","pagePath": "pages/demo/demo","text": "demo"}]},// 使用的组件放在这里"usingComponents": { },"sitemapLocation": "sitemap.json"
}

3.3 详情配置#

1. 基本信息配置
2. 本地配置

(四) 小程序控制台配置#

登录小程序: 微信公众平台

4.1 版本管理#

1. 上传代码获得体验版, 体验版需要添加权限才可以访问
2. 体验版转正式版
3. 腾讯审核通过后就变正式版, 所有人都可以访问

4.2 成员管理#

4.3 开发管理#

1. 开发者id和密钥
2. 服务器域名配置

(五) 小程序使用nodejs模块#

1. 初始化package.json npm init
2. npm i 安装依赖
3. 构建项目

小程序核心知识点

1. 含了经纬度console.log(res);let {latitude,longitude} = res;this.setData({location: {latitude,longitude}})this.getCityName(res);},fail: (err) => {this.setData({city: '定位失败,请手动选择'})}})},// 获取城市名称getCityName({latitude,longitude}) {let url = `/?location=${latitude},${longitude}&key=XBZBZ-OBG63-LOD3N-3QR5Q-X6Z2Q-BFBIR`;wx.request({url,success: (res) => { let cityName = res.data.result.address_component.city;this.setData({cityName}); this.getCinemaList(cityName);}})}
   });
   

(十二) 上拉加载更多#

1. 触底生命周期

     /*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},
   

2. 上拉加载更多的思路

   1. 定义个变量, 存放当前页(currPage), 默认为1
   2. 刚进页面, 请求第一页的数据并渲染
   3. 上拉到底的时候, 请求当前页数+1, 得到的数据与原先数组进行合并
   4. 当返回的数据数组为空的时候, 在底部显示 '没有更多数据'

3. 代码实现

   // cinema.wxml

   <view wx:for="{{list}}" wx:key="cinemaId"> <view class="item bd-gray bg-fff"><view class="flex jc-sb"><text class="f16">{{item.name}}</text><text class="f14 red">¥69 <text class="f10">元起</text></text></view>....</view> 
   </view> <view class="flex jc-c f999 pt-10 pb-15" wx:if="{{show}}">没有更多数据了</view>
   

   // cinema.js

   const app = getApp();
   Page({data: {show: false, // 上拉没有数据时显示currPage: 1, // 当前页pageSize: 10, // 每页条数list: [] // 影院列表},onLoad() {// 获取第一页数据this.getList();},// 获取列表getList() {// 请求参数let param = {currPage: this.data.currPage,pageSize: this.data.pageSize,cityName: '深圳'}app.get('/cinema/list', param).then(res => {// 请求返回的数组为空时,显示没有更多数据了if (res.data.length===0) {this.setData({show: true})}// 把得到数组数组与原先列表合并this.setData({list: [...this.data.list, // 原来的数组...res.data // 请求所得数据]}, () => {wx.hideLoading();});}).catch(err => {wx.showToast({title: '获取影院列表失败',icon: 'fail',duration: 2000})});},// 触底onReachBottom() {// 当前页+1this.setData({currPage: this.data.currPage+1});// 发送请求this.getList();}
   })
   

(十三) 下拉刷新(略)#

(十四) 支付流程#

1. 前端请求后端创建订单接口

2. 后端调用小程序统一下单 API, 成功之后给前端返回支付所需参数

3. 小程序端使用 wx.requestPayment调起支付窗口

   // demo.wxml

   <button bindtap="payNow">立即支付</button>
   

   // demo.js

   payNow() {wx.requestPayment({ timeStamp: '时间戳,后台返回', nonceStr: '随机字符串,后台返回', package: '统一下单接口返回的 prepay_id 参数值,后台返回',signType: '签名类型,后台返回',paySign: '签名,后台返回',// 支付成功的回调success(res) {console.log('支付成功');},// 支付失败的回调fail(err) {console.log('支付失败');},}); 
   }
   

(十五) 自定义组件#

自定义一个导航组件

1. 新建nav文件夹, 右键nav, 新建组件

2. 编写组件静态

3. 在父组件(demo.json) 注册组件, 添加代码

   {"usingComponents": {"Nav":"./nav/nav"}
   }
   

4. 在wxml中使用组件

   <Nav></Nav>
   

5. 父子组件通信

   • 父传子, 使用属性, 子组件通过 properties:{} 接收
   • 子传父
     1. 父组件绑定自定义事件 bind:xxx
     2. 子组件触发自定事件xxx this.triggerEvent('xxx',{数据对象})

6. 完整代码:

   // 父组件

   // demo.wxml
   <Nav title="购物车" bind:clickLeft="clickLeft"></Nav>// demo.json
   {"usingComponents": {"Nav":"./nav/nav"}
   }
   // demo.js
   Page({ clickLeft() {console.log('左按钮被点击了')}
   })
   

   // 子组件

   // nav.wxml
   <view class="header"><text bindtap="clickLeft">左按钮</text><view class="title">{{title}}</view><text class="button">右按钮</text>
   </view>// nav.js
   Component({ properties: {title: String}, methods: {clickLeft() {this.triggerEvent('clickLeft');},  
   }) // nav.wxss
   page {background: #ebebeb;
   }
   .header {display: flex;height: 50px;background-color: green;justify-content: space-between;align-items: center;padding: 0 15px;color: #fff;
   }
   

(十六) postman(了解)#

1. 设置环境: 不同的环境对应的接口地址不一样

   • 开发环境

   • 测试环境

   • 生产环境

2. 添加请求接口

3. 测试请求