评论

微信小程序讲解 我看到的文章感觉很有意义所以转载一下给大家

1.学会注册小程序帐号 2.安装小程序开发者工具 3.创建小程序项目 4.熟悉小程序目录结构 5.小程序hello world

一、本期要点:


1.学会注册小程序帐号
2.安装小程序开发者工具
3.创建小程序项目
4.熟悉小程序目录结构
5.小程序hello world


要点1:学会注册小程序帐号


打开:https://mp.weixin.qq.com/wxopen/waregister?action=step1&token=&lang=zh_CN


注册完登录小程序后台:开发-开发者设置--AppID(小程序ID) wxf4be8f9be8e111a2


要点2:下载并安装小程序开发者工具


下载地址: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html


要点3.创建小程序项目


  打开安装好的微信web开发者工具,点击+创建小程序项目,添加项目名称,指定小程序目录和appid-->点击创建


4.熟悉小程序目录结构


   pages目录:是你平时干活的目录  相当于vue中的src
   utils目录:存放平时封装的一个工具目录 例如:封装ajax等

   app.js:小程序入口  相当于vue中的main.js
   app.json:小程序的全局配置
   app.wxss:是小程序的全局样式
   project.config.json 小程序项目的环境设置,通常不动


要点5.小程序hello world(创建页面)


  一个小程序页面包括的文件类型:

     以pages中的index目录为例:

       index.js:页面的js逻辑
       index.json:当前页面的配置
       inex.wxml:页面模板  相当于html
       index.wxss: 页面样式,相当于css


一、重温小程序如何创建页面


1.手动建立


2.批量建立:


右键pages->创建目录


右键在创建的目录->新建page->命名并回车


二、小程序数据绑定


通过在data:{}中添加数据,通过在wxml页面中添加{{ }}来绑定数据


绑定数据的形式:字符串,数值,数组


三、小程序数据遍历和判断


数组如何遍历:通过wx:for,通过item添加每一项,通过index添加索引


例如:




wx:for="{{ list }}"


wx:for-index="要改的下标名称"


wx:for-item="要改的项的名称"


>


商品编号:{{ id+1 }}


商品名称:{{ item.name }}


商品价格:{{ item.price }}




四、小程序css选择器


小程序css选择器只能使用:class,id


一、重温小程序如何创建页面


1.手动建立
2.批量建立:

右键pages->创建目录
右键在创建的目录->新建page->命名并回车


二、小程序数据绑定


通过在data:{}中添加数据,通过在wxml页面中添加{{  }}来绑定数据

绑定数据的形式:字符串,数值,数组


三、小程序数据遍历和判断


数组如何遍历:通过wx:for,通过item添加每一项,通过index添加索引

例如:

  class="goods-list">
            <view class="border_bottom" 
                   wx:for="{{ list  }}"
                   wx:for-index="要改的下标名称"
                   wx:for-item="要改的项的名称"
            >
                <view>商品编号:<text>{{ id+1 }}</text></view>
                <view>商品名称:<text>{{ item.name }}</text></view>
                <view>商品价格:<text>{{ item.price }}</text></view>
            </view>

 </view>

 注:通过
      wx:for-index="要改的下标名称"
      wx:for-item="要改的项的名称"

   不改默认每一项的名称:item,
   不改默认每一项的索引:index


四、小程序css选择器


小程序css选择器只能使用:class,id,标签(例如:view,text),群组,:after,:before


五、条件渲染


小程序支持的条件渲染:wx:if,hidden 两种


  wx:if 相当于vue中v-if,满足则创建出来,不满足删除

  hidden 相当于vue中的v-show的取反


例如:


    <view wx:if="{{ 布尔值  }}">  //满足条件,渲染的内容  </view>

    <view wx:else>不满足条件显示的内容</view>


五、小程序事件绑定


格式: <标签 bind事件类型="要触发的方法名">文本


例如:   <view bindtap="要触发的方法名">点我</view>


六、小程序页面如何传参


两种方式:


第一种:通过自定义属性传参 例如:data-自定义属性名="值"
第二种:通过路由跳转传参


七、小程序页面如何跳转


wx.navigateTo({
url: 'test?id=1'
..

注:如何动态改变小程序的标题(即title)

    第一种:手动修改
    第二种:用程序修改


八、小程序如何获取后台数据 ****************


后台返回格式:json


交互方式:


 1.js原生  XMLHttpRequest()
 2.jQuery: $.ajax({  }),$.get(),$.post(),$.getJSON()
 3.Vue: axios
 4.React: fetch
 5.微信小程序:wx.request({  })  和jQuery的$.ajax()类似

 注意:

    1.小程序通常不支持本地的JSON文件,通常放在线上的一个真实地址
    2.小程序线上接口地址必须是  https://xxxxx.como/api/goods.json


git网站静态化,可以像买了域名和空间的网站一样


 用git将本地代码
 先推送到线上gitee pages-启用

 配置小程序后台线上域名即白名单 


开发-服务器域名


request合法域名 :https://wxw666.gitee.io


1.小程序如何遍历


wx:for="{{ 要遍历的数组名 }}"


2.小程序如何实现条件渲染


wx:if,hidden


3.小程序如何绑定事件


点我


例如:点我


4.小程序如何跳转页面


wx.navigatorTo({


url:'要跳转的地址'


})


5.小程序两个页面之间如何传参


传参:通过自定义属性配合 wx.navigatorTo


接参:在另一个要接收的页面通过onLoad中的options来接收


=================================================================


本节要点:


1.再一次讨论页面跳转


2.小程序的钩子函数


3.小程序的UI组件


4.小程序的生态圈


一、再一次讨论页面跳转


跳转方式有两种:类似vue的两种方式


第一种:标签方式(navigator) 类似于vue-router中的router-link

第二种:js方式(有4个)

  **** wx.navigateTo(Object object)
   wx.switchTab(Object object)
   wx.redirectTo(Object object)
   wx.reLaunch(Object object)


二、小程序的钩子函数


三、小程序的UI组件


1.轮播组件:swiper


2.switch:开关


3.picker:普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器


一、小程序实现自定义组件


从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程


第一步:创建一个components文件夹


  内部创建要复用的组件,例如:Dialog

  右键新建Dialog目录->右键新建component并生成四个文件


第二步:如何在其他页面引入刚才创建的Dialog组件


参考资料:


https://www.jianshu.com/p/8a2a730d9e60/


二、在小程序中如何mock数据


(一)在小程序中使用mock数据的步骤:


第一步:下载文件:mock.js,wxmock.js并引入到utils目录中


第二步:创建接口文件,即要请求的模拟数据接口 例如:user.js


在utils下创建一个user.js文件,生成要用的模拟数据,例如:


     //引入基于小程序的wxmock
     var Mock = require('../WxMock.js')

     //基于ajax请求地址的模拟数据

     //格式: Mock.mock('请求地址',数据模板)

     var users=Mock.mock('https://1608A.com/users', {
     "codeText":"成功返回",
     "code": 200,
     "data|1-20": [
        {
           "name": function () {
           return Mock.Random.cname()
           },
           "lastLogin": function () {
           return Mock.Random.datetime()
           }
        }
     ]
     })
     var del=Mock.mock('https://xxx.com/user/delete', {
     "code": 200,
     "message": "s删除成功"
     })

     //请求文章列表
     var article=Mock.mock('http://www.baidu.com/getArticle',{

        "code":666,
        "successText":"成功返回",
        "content":[
           {"id":1001,"name":"文章标题","content":"文章内容"},
           {"id":1002,"name":"文章标题222","content":"文章内容222"}
        ]

     })

     export default {
        users,
        del,
        article
     }


第三步:使用接口渲染数据(即:在需要请求的页面中用wx.request()来请求需要的数据)


     wx.request({
        url:'http://www.baidu.com/getArticle',
        success:function(res) {
              console.log('我在购物车页面我得到的数据:',res)
        }

     })


(二)如何生成mock数据


  1.生成序列

  Mock.mock({
  "number|+1": 202
  })


参考资料:

作者:刘松阳

链接:https://www.jianshu.com/p/bc3996c30d6c

来源:简书

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

点赞 0
收藏
评论

1 个评论

登录 后发表内容